Group multiple columns with different size inputs - html

Question

I have a large number of inputs I need to display. I am trying to condense them into like groups. The first group I am have is going to have 6 inputs in 3 columns but the third input box is big, so I want the next rows input to line up with the bottom of the larger text box. Form Layout
I have tried to float them, list them, use a table, but all without successs
I have looked at a lot of CSS code snippets and cannot figure out how to get this layout. Any help would be greatly appreciated.
Edit: I found a way to make it work, but would like a more elegant solution. HTML:
.row1 {
float: left;
background-color: #ffffff;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
font-family: Raleway, sans-serif;
text-align: center;
text-decoration: none;
padding: 5px;
}
.row2{
float: left;
background-color: #ffffff;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
font-family: Raleway, sans-serif;
text-align: center;
text-decoration: none;
padding: 5px;
}
.row3{
float: left;
display: inline-block;
clear: left;
position: relative;
margin-top: -80px;
}
<div class="row1">
<label>
<span>Full Project Number</span><br>
<input type="text" name="project" id="project">
</label>
</div>
<div class="row1">
<label>
<span>Client</span><br>
<input type="text" name="client" id="client">
</label>
</div>
</div>
<div class="row2 fasttimesatseedmonthigh">
<label id="descrp">
<span>Project Description</span><br>
<textarea name="name" type="text" cols="50" rows="10"></textarea>
</label>
</div>
<div class="row3">
<div class="row1">
<label for="drawing">
<span>Drawing Number</span><br>
<input type="text" name="drawing" id="drawing">
</label>
</div>
<div class="row1">
<label>
<span>Assigned By:</span><br>
<input type="text" name="assigned" id="assigned" style="width: 75px;">
</label>
</div>
<div class="row1">
<label class="form-row">
<span>Date</span><br>
<?php
$stamp=date("Y/m/d");?>
<input type="text" name="date" id="date" value="<?php echo(htmlspecialchars($stamp))?>"/>
</label>
</div>
</div>
It works but like I said not as nice as I would like it.

Answer 1

How about a good ol' table with row&colspan?
.grid{
border: solid 1px black;
table-layout: fixed;
font-family: Raleway, sans-serif;
border-spacing: 10px;
}
.grid td{
text-align: center;
vertical-align: top;
font-size: 9pt;
}
.grid td.wide{
width: 200px;
}
.grid td.normal{
width: 100px;
}
.grid td input{
width: 100%;
}
<table class="grid">
<tr>
<td colspan="2" class="wide">
<label>
<span>Full Project Number</span><br>
<input type="text" name="project" id="project">
</label>
</td>
<td colspan="2" class="wide">
<label>
<span>Client</span><br>
<input type="text" name="client" id="client">
</label>
</td>
<td colspan="2" rowspan="2">
<label id="descrp">
<span>Project Description</span><br>
<textarea name="name" type="text" cols="20" rows="8"></textarea>
</label>
</td>
</tr>
<tr>
<td colspan="1" class="normal">
<label for="drawing">
<span>Drawing Number</span><br>
<input type="text" name="drawing" id="drawing">
</label>
</td>
<td colspan="1" class="normal">
<label>
<span>Assigned By</span><br>
<input type="text" name="assigned" id="assigned">
</label>
</td>
<td colspan="2" class="wide">
<label class="form-row">
<span>Date</span><br>
<input type="text" name="date" id="date">
</label>
</td>
</tr>
</table>
Plis no hate.