dl dt dd のリストを横並びにしたい

Question

初めに

テキストボックスにデザインを加える前は、横並びにすることができました。
しかし、デザインを入れた後に縦に並んでしまいました。

コード

<div class="content">
<h2 class="head">トライ</h2>
<form action="/../.." method="get">
<dl>
 <dt>入力1</dt>

 <dd><div class="cp_iptxt"><label class="ef"><input  type="text" placeholder="入力欄" type="text" name="inputspace" size="15" required ></label></div></dd>
</dl>
</div>

.content{
    width: 100%;
    height: 70%;
    text-align:center;
    background-color: #ddffdd;
}
form{
  padding:30px 100px;
  display:table;
  margin-left: auto;
    margin-right: auto;
    <!-- background-color: #eaeaea; -->
}
form dl dt{
  width: 165px;
  padding:10px 0;
  float: left;
}
form dl dd{
  padding:10px 0;
}
.cp_iptxt {
	position: relative;
	width: 80%;
	margin: 40px 3%;
}
.cp_iptxt input[type='text'] {
	font: 15px/24px sans-serif;
	box-sizing: border-box;
	width: 100%;
	padding: 0.3em;
	transition: 0.3s;
	letter-spacing: 1px;
	color: #aaaaaa;
	border: none;
	border-bottom: 2px solid #1b2538;
	background: transparent;
}
.ef input[type='text']:focus {
	border-bottom: 2px solid #9fd9cb;
	outline: none;
}

試したこと

クロームで検証しました。
dlの幅が小さいから縦になってるのではないかと考えています。

Answer 1

HTMLの修正(formの終了タグを追加や片方のtype属性の削除)はやっていただくとして、CSSはdisplay: table;が書いてあるので、それを使うとすると、

.content{
  text-align:center;
  background-color: #ddffdd;
}

form {
  padding: 30px 100px;
  display: table;
  margin: 0 auto;
  width: 360px;
}

form dt {
  width: 165px;
  display: table-cell;
}

form dd {
  display: table-cell;
}

.cp_iptxt input[type='text'] {
    font: 15px/24px sans-serif;
    transition: 0.3s;
    letter-spacing: 1px;
    color: #aaaaaa;
    border-style: none;
    border-bottom: 2px solid #1b2538;
    background-color: transparent;
}

.ef input[type='text']:focus {
    border-bottom: 2px solid #9fd9cb;
    outline: none;
}

こんな感じですかね。

Comments

[unity3dbigginer]

上記を参考にして、できました！
ありがとうございました！

Answer 2

閉じタグがおかしい。inputのtypeが2つある。

<div class="content">
  <h2 class="head">トライ</h2>
  <form action="/../.." method="get">
    <dl>
      <dt>入力1</dt>
      <dd>
        <div class="cp_iptxt">
          <label class="ef">
            <input type="text" placeholder="入力欄" name="inputspace" size="15" required>
          </label>
        </div>
      </dd>
    </dl>
  </form>
</div>

多分ddがfloatしてないから。

form dl dd {
  padding: 10px 0;
  float: left;
}

あとcssのコメントはこう
/background-color: #eaeaea;/