ラベル/入力をインラインブロック形式で配置する

Question

ラベル/入力の2つをインラインにする際に問題がありますが、ブロック形式でも表示されます。 account-input-medをdisplay: inline,display: inline-blockに変更しようとしましたが、常にラベルがインラインで表示されます。

私の州/ジップラベル/入力を下の画像のように表示するには、何が必要なのか誰にも見えますか？ラベルの後

.right-container { 
 
    width: 50%; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 
.account-label { 
 
    font-size: 1.2em; 
 
    margin: 10px 0; 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
    display: block; 
 
    color: #5E5E5E; 
 
} 
 
.account-input, .account-input-med, .account-input-large { 
 
    padding: 10px; 
 
    font-size: 1.2em; 
 
    font-family: 'Lato', sans-serif; 
 
    margin: 15px 0; 
 
    display: block; 
 
    border: 1px solid #CDCDCD; 
 
    color: #5E5E5E; 
 
} 
 
.account-input { 
 
    width: 80%; 
 
} 
 
.account-input-med { 
 
    width: 30%; 
 
    display: inline-block; 
 
} 
 
.account-input-large { 
 
    width: 40%; 
 
    height: 150px; 
 
}

<div class="right-container"> 
 
    <!-- Right Address Container --> 
 
    <h2 class="account-section-subtitle lato">Shipping Address</h2> 
 
    <label class="account-label">City</label> 
 
    <input type="text" class="account-input"> 
 
    <label class="account-label">State</label> 
 
    <input type="text" class="account-input-med"> 
 
    <label class="account-label">Zip/Postal Code</label> 
 
    <input type="text" class="account-input-med"> 
 
</div>

Answer 1

あなたがラベルに入力をラップすることができます：

<label class="account-label"> 
    <span>State</span> 
    <input type="text" class="account-input"> 
    </label> 

のCss：

.account-label { 
    display: inline-block; 
} 
.account-input { 
    display: block; 
} 

Answer 2

場所

<br/> 

新しい行に入力開始を作ります。

 <label class="account-label">City</label>&nbsp 
     <label class="account-label">State</label><br/> 
     <input type="text" class="account-input">&nbsp 
     <input type="text" class="account-input-med">