JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <table>
        <tr>
            <td>
                <div class="top">
                  
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="bottom">
                  asdf lakdsjf lksdj flsj flksjd lfs 
                </div>
            </td>
        </tr>
    </table>
</div>

CSS

.container {
  border: solid 1px lime;
  height: 200px;
  width: 400px; 
}

.top {
  height:15px;
    width:100%
}

.bottom {
  background-color: #fdd;
  height: 100%;
}

table {
  height: 100%;
  width: 100%;  
}