Как сохранить равную высоту textarea с входами?

Question

Как сохранить верхнюю часть сообщения (textarea) входной сигнал с именем ввода и нижней строкой с помощью ввода телефона?

Я хочу, чтобы текст textarea имел ту же высоту, что и 3 входа слева вместе. Я действительно хотел бы, чтобы границы выстроились красиво

Я пробовал вручную указывать высоту, но как только изменяется размер окна, высота меняется, отбрасывая дизайн.

Как это сделать, но при этом оно реагирует?

Чтобы увидеть результаты, как на картинке, вы должны расширить видимую область (за счет начальной загрузки md) Вот внешняя ссылка. https://jsfiddle.net/6ma7ndmL/3/

@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:100,300,400,500,700'); 
 
section { 
 
    width: 100%; 
 
    padding: 4em 0; 
 
} 
 
@media screen and (min-width: 768px) { 
 
    section .container, 
 
    section .row { 
 
    padding: 0; 
 
    } 
 
} 
 
header.section-header { 
 
    text-align: center; 
 
    padding: 0 0 3em; 
 
} 
 
header.section-header h2 { 
 
    font-size: 2em; 
 
} 
 
section.contact form { 
 
    font-family: 'Roboto Mono'; 
 
    color: #000; 
 
} 
 
section.contact form input, 
 
section.contact form textarea { 
 
    border-color: #000; 
 
    border-width: 2px; 
 
    border-radius: 0; 
 
    transition: 0.4s border-color ease; 
 
} 
 
section.contact form input:focus, 
 
section.contact form textarea:focus { 
 
    transition: 0.4s border-color ease; 
 
    border-color: #f33; 
 
} 
 
section.contact form textarea { 
 
    resize: none; 
 
} 
 
section.contact form button.btn { 
 
    background-color: #000; 
 
    border-color: #000; 
 
    border-width: 2px; 
 
    color: #fff; 
 
    outline: none; 
 
    border-radius: 0; 
 
    float: right; 
 
    transition: 0.4s background-color ease, 0.4s color ease, 0.4s border-color ease; 
 
} 
 
section.contact form button.btn:hover { 
 
    transition: 0.4s background-color ease, 0.4s color ease, 0.4s border-color ease; 
 
    background-color: #fff; 
 
    color: #000; 
 
    border-color: #f33; 
 
} 
 
@media screen and (min-width: 768px) { 
 
    section.contact form [class^='col-']:nth-child(1) { 
 
    padding-left: 0; 
 
    } 
 
    section.contact form [class^='col-']:nth-child(2) { 
 
    padding-right: 0; 
 
    } 
 
    section.contact form [class^='col-']:nth-child(3) { 
 
    padding: 0; 
 
    } 
 
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div id="contact"> 
 
    <section class="contact"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <header class="section-header"> 
 
      <h2>contact</h2> 
 
     </header> 
 
     <div class="col-lg-10 offset-lg-1"> 
 
      <form action="" method="post"> 
 
      <div class="col-md-6"> 
 
       <div class="form-group"> 
 
       <input id="name" type="text" name="name" class="form-control" /> 
 
       <label for="name">name</label> 
 
       </div> 
 
       <div class="form-group"> 
 
       <input id="email" type="email" name="email" class="form-control" /> 
 
       <label for="email">email</label> 
 
       </div> 
 
       <div class="form-group"> 
 
       <input id="phone" type="tel" name="phone" class="form-control" /> 
 
       <label for="phone">phone</label> 
 
       </div> 
 
      </div> 
 
      <div class="col-md-6"> 
 
       <div class="form-group"> 
 
       <textarea id="message" name="message" class="form-control"></textarea> 
 
       <label for="message">message</label> 
 
       </div> 
 
      </div> 
 
      <div class="col-sm-12"> 
 
       <div class="form-group"> 
 
       <button id="formsubmit" type="submit" class="btn">send</button> 
 
       </div> 
 
      </div> 
 
      </form> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </section> 
 
</div>

Answer 1

Этот код, кажется, работает. Fiddle DemoРедактировать: если я правильно вас понял, вы хотите этот код.

section.contact form textarea { 
    line-height: 98.5px !important; 
} 

98.5px быть Exacto Mundo :) Или вы можете использовать некоторые JavaScript и использовать что-то вроде этого.

document.getElementById("message").rows = "10";