JSFiddle - React, Tailwind, and code Playground

HTML

<div class="fullwidth">
  <div class="available">10</div>
  <div class="notavailable">10</div>
  <br class="clear" />
</div>
<hr>
<table>
  <tr>
    <td style="background-color: green; width: 50px; text-align: center;">10</td>
    <td style="background-color: blue; width: 50px; text-align: center;">10</td>
</table>

CSS

br.clear {
  float: clear;
}

div.fullwidth {
  display: table;
}

div.available {
  background-color: green;
  color: #111111;
  text-align: center;
}

div.notavailable {
  background-color: blue;
  color: #DDDDDD;
  text-align: center;
}

.fullwidth div {
  width: 53px;
  height: 20px;
  display: table-cell;
  margin: 2px;
  border-spacing: 5px;
  border: solid 1px white;
	
	color:black;
}