I am trying to create a contact form similar to the design bellow, but can't seem to get the correct result. I thought I could do this with flex-box, but I am having trouble getting the Text Area to Display correctly. If there is a better way to do this with keeping the HTML structure the same, I am open to suggestions.
<form class="flex-container">
<ul>
<li>
<input type="text" placeholder="left">
</li>
<li>
<input type="text" placeholder="left">
</li>
<li>
<input type="text" placeholder="left">
</li>
<li>
<input type="text" placeholder="right">
</li>
<li>
<input type="text" placeholder="left">
</li>
<li class="text-area">
<textarea placeholder="right"></textarea>
</li>
</ul>
</form>
Maybe there is a more quick solution but you can do that with bootstrap :
<form class="container">
<div class="col-5 row">
<div class="col-6">
<div class = "row">
<input type="text" placeholder="left">
</div>
<div class="row mt-3">
<input type="text" placeholder="left">
</div>
<div class="row mt-3">
<input type="text" placeholder="left">
</div>
<div class="row mt-3">
<input type="text" placeholder="left">
</div>
</div>
<div class="col-3 ml-3">
<div class = "row">
<input type="text" placeholder="left">
</div>
<div class = "row mt-3 heightCSS">
<textarea placeholder="right"></textarea>
</div>
</div>
</div>
CSS :
.heightCSS{
height: 8em;
width: 14em;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.