Make a list of values line up with a textarea and labels

Question

Here's some CSS and HTML to make a textarea below a list of data points:

form label {
  width: 140px;
  float: left;
}
form ol li {
  background: #98c8dc;
  list-style: none;
  padding: 5px 10px;
}

<form>
<ol>
<li>
  <label><br/><br/><br/><br/>Recent data</label>
  <ol>
  <li>3 99</li>
  <li>5 98</li>
  <li>15 97</li>
  <li>28 96</li>
  </ol>
</li>
<li>
  <label>New data</label>
  <textarea placeholder="30 95" rows="4"></textarea>
</li>
</ol>
</form>

It renders like this:

How would you recommend I get it to line up just right? Namely, "Recent data" should line up with the "28 96" line and, perhaps trickiest, the "30 95", despite being in the textarea, should line up as if it's just another row that comes after the "28 96".

Answer 1

Vertical-align doesn't work in inline elements but does work in tables (more details on vertical-align).

So here's a solution: I just wrapped the two main elements in the first li in a table row, and set the vertical align to bottom to force the 'recent data' label to the bottom. (There might be some way using the display property to change the li from an inline element?)

You'll also need to tweak the padding on the ol and the labels and table tags so that everything lines up. In real life you probably use some sort of reset css to normalize the default style rules for all these different elements, so you might have to make different tweaks to get everything to line up perfect, but here's what I came up with.

Altogether now:

<style>
table,tbody,tfoot,thead,tr,th,td {
   margin:0;
   padding:0;
   border:0;
   outline:0;
   font-size:100%;
   vertical-align:baseline;
   background:transparent}
body{line-height:1}
ol,ul{list-style:none}
table {border-spacing: 0px;}
table td{
  vertical-align: bottom;
}

* {
  font-size: 14px;
  font-family: Times New Roman, serif;
} 
form label {
  width: 140px;
  float: left;
} 
form ol li {
  background: #98c8dc;
  list-style: none;
  padding: 5px;
  margin-bottom: 2px;
} 
form ol li:last-child {
  margin-bottom: 0px;
}
form li label{
  padding: 4px 0 4px 0;
} 
</style>

<form>
<ol>
<li>
<table><tr><td>
  <label>Recent data</label>
</td><td>
  <ol>
  <li>3 99</li>
  <li>5 98</li>
  <li>15 97</li>
  <li>28 96</li>
  </ol>
</td>
</tr></table>
</li>
<li>
  <label>New data</label>
  <textarea placeholder="30 95" rows="4"></textarea>
</li>
</ol>
</form>