Aligning headers and cells

by Mohammed Ismail Ansari

HTML

<h2 class="name">
    Bradley, Cooper
</h2>
<h2 class="gender">
    Male
</h2>
<h2 class="age">
    44
</h2>
<h2 class="location">
    West Wing11
</h2>
<h3 class="name">
    Patient Name
</h3>
<h3 class="gender">
    Sex
</h3>
<h3 class="age">
    Age
</h3>
<h3 class="location">
    Location
</h3>

CSS

body {
  display: table;
}

h2 {
  background-color: Gray;
}

h3 {
  background-color: Yellow;
}

h2,
h3 {
  margin: 0;
  padding: 0 30px;
  display: table-cell;
  float: left;
}

h3.name {
  clear: left;
}