テキストボックスを選択と同じ高さにするにはどうしたらいいですか？

Question

私は開発しているフォームを持っていますが、フォームフィールドに幅が反応するようにすることができますが、textareaボックスは右側の選択フィールドよりもわずかに背が高いです。どうすればこれらの2つを同じ高さにすることができますか？

ここにはcodepenのフォームがあります。以下はコードです

 <div class="row"> 
     <div class="col-md-6"> 
      <div class="control-group"> 
      <div class="form-group floating-label-form-group controls"> 
       <label for="00NW0000001Zjiv" class="control-label" style="font-weight:300">Truck Model(s)</label> 
       <textarea id="00NW0000001Zjiv" name="00NW0000001Zjiv" type="text" class="form-control input-lg" rows="5"></textarea><span class="help-block bg-danger"></span> 
      </div> 
      </div> 
     </div> 
     <div class="col-md-6"> 
      <div class="control-group"> 
      <div class="form-group floating-label-form-group controls"> 
       <label for="00NW0000001Zjje" class="control-label" style="font-weight:300">State(s) in which the truck(s) run</label> 
       <select id="00NW0000001Zjje" name="00NW0000001Zjje" multiple="multiple" class="form-control input-lg"> 
       <option value="Alabama">Alabama</option> 
       <option value="Alaska">Alaska</option> 
       <option value="Arizona">Arizona</option> 
       <option value="Arkansas">Arkansas</option> 
       <option value="California">California</option> 
       <option value="Colorado">Colorado</option> 
       <option value="Connecticut">Connecticut</option> 
       <option value="Delaware">Delaware</option> 
       <option value="Florida">Florida</option> 
       <option value="Georgia">Georgia</option> 
       <option value="Hawaii">Hawaii</option> 
       <option value="Idaho">Idaho</option> 
       <option value="Illinois">Illinois</option> 
       <option value="Indiana">Indiana</option> 
       <option value="Iowa">Iowa</option> 
       <option value="Kansas">Kansas</option> 
       <option value="Kentucky">Kentucky</option> 
       <option value="Louisiana">Louisiana</option> 
       <option value="Maine">Maine</option> 
       <option value="Maryland">Maryland</option> 
       <option value="Massachusetts">Massachusetts</option> 
       <option value="Michigan">Michigan</option> 
       <option value="Minnesota">Minnesota</option> 
       <option value="Mississippi">Mississippi</option> 
       <option value="Missouri">Missouri</option> 
       <option value="Montana">Montana</option> 
       <option value="Nebraska">Nebraska</option> 
       <option value="Nevada">Nevada</option> 
       <option value="New Hampshire">New Hampshire</option> 
       <option value="New Jersey">New Jersey</option> 
       <option value="New Mexico">New Mexico</option> 
       <option value="New York">New York</option> 
       <option value="North Carolina">North Carolina</option> 
       <option value="North Dakota">North Dakota</option> 
       <option value="Ohio">Ohio</option> 
       <option value="Oklahoma">Oklahoma</option> 
       <option value="Oregon">Oregon</option> 
       <option value="Pennsylvania">Pennsylvania</option> 
       <option value="Rhode Island">Rhode Island</option> 
       <option value="South Carolina">South Carolina</option> 
       <option value="South Dakota">South Dakota</option> 
       <option value="Tennessee">Tennessee</option> 
       <option value="Texas">Texas</option> 
       <option value="Utah">Utah</option> 
       <option value="Vermont">Vermont</option> 
       <option value="Virginia">Virginia</option> 
       <option value="Washington">Washington</option> 
       <option value="West Virginia">West Virginia</option> 
       <option value="Wisconsin">Wisconsin</option> 
       <option value="Wyoming">Wyoming</option> 
       </select><span class="help-block bg-danger"></span> 
      </div> 
      </div> 
     </div> 
     </div> 

ありがとうございます！

Answer 1

手動でテキスト領域に高さを付けることができます。だからメディアクエリのテキストエリアに高さを与えてください。

このようにしても、応答性を達成することができます。

私は、これはCSSあなた JSFiddle Link

<div class="row"> 
     <div class="left"> 
      <label for="first-name">First Name</label> 
       <input type="text" name="first-name" placeholder="First Name" id="first-name" required="required" /> 

     </div> 
     <div class="right"> 
      <label for="details">Details</label> 
      <textarea name="details" placeholder="Details" id="details" required></textarea> 
     </div> 
    </div> 

役立つかもしれない願っています：あなたは、あなたの問題のより多くの最小限の例を作る場合

@media only screen and (min-width: 600px) { 

     textarea { height: calc(100% - 0.75em); /* 100% fill height, minus height of details label */ } 
    }