JSFiddle - React, Tailwind, and code Playground

by Pangur Ban

HTML

<div class="wr">
    <div class="one">one</div>
    <div class="two">two</div>
</div>

CSS

*{
    box-sizing: border-box;
}
.wr{
        border-collapse: separate;
    display: table;
    position: relative;
}
.wr:first-cild{
    color: red;
}
.wr:last-child{
    color: blue;
}
.one,
.two{
    display: table-cell;
}
.one{
        vertical-align: middle;
    white-space: nowrap;
    width: 1%;
}
.two{
        float: left;
    margin-bottom: 0;
    position: relative;
    width: 100%;
    z-index: 2;
}