What is the best way to align the message input field with the name and phone input fields?
I need the height of the message input field to match the combined height of the three inputs on the left. It's crucial that the borders line up perfectly.
I've attempted setting a fixed height for the message input field, but it becomes unpredictable when the window size changes, disrupting the design.
Is there a responsive solution to achieve this alignment?
https://i.sstatic.net/0eHuq.png
To replicate the desired results shown in the image, you may need to expand the viewable area (due to bootstrap md) Here is a link to an external example. 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>