JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="innerOne inner">first</div>
  <div class="innerTwo inner">

At different viewports .innerTwo's content is taller than that of .innerOne's but I would like it's background to be the same size as .innerTwo'sAt different viewports .innerTwo's content is taller than that of .innerOne's but I would like it's background to be the same size as .innerTwo's

</div>
</div>

CSS

.container{
    width:100%;
    border:1px solid red;
    display:table;
}
.inner{
    display:table-cell;
    background:green;
    width:50%;
}
.innerTwo{
    background:blue
}