Seeking guidance with my limited understanding of html/css on creating a div layout for a form, as depicted in the image below:
https://i.sstatic.net/Hl8k3.jpg
My attempt resulted in quite a mess, so I'm looking for advice on the best approach to implement this div layout.
Below is my current html/css code, but it's not achieving the desired result of aligning input boxes/buttons next to their corresponding labels like shown in the image. Additionally, I'm unsure if my code accurately reflects the overall concept of replicating the div layout from the image:
.flex-container {
display: flex;
}
.flex-child {
flex: 1;
border: 2px solid red;
width: 100%;
margin-right: 20px;
}
.flex-child:first-child {
margin-right: 20px;
}<h1>The td rowspan attribute</h1>
<div class="flex-container">
<div class="flex-child">
Label
<div class="flex-child">
Label
</div>
<div class="flex-child">
Label
</div>
<div class="flex-child">
<textarea id="w3review" name="w3review" rows="4" cols="50"></textarea>
</div>
</div>
<div class="flex-child">
Label
<div class="flex-child">
<textarea id="w3review" name="w3review" rows="4" cols="50"></textarea>
</div>
</div>
<div class="flex-child">
Text
<div class="flex-child">
Label
<div class="flex-child">
Button
</div>
</div>There should be 2 text area boxes that can expand vertically when dragged by the user.
Any assistance on this matter would be greatly appreciated. Thank you.