JSFiddle - React, Tailwind, and code Playground

by oti ext

HTML

<table>
<table class="row">
    <tr>
        <td class="cell">
            Lorem ipsum dolor...
        </td>
        <td class="cell verticalfix">
            <div class="float">float</div>
            Lorem ipsum dolor...
        </td>
    </tr>
</table>  

&lt;div&gt; {display: table;}
<div class="row">
    <div class="cell">
        Lorem ipsum dolor...
    </div>
    <div class="cell verticalfix">
        <div class="float">float</div>
        Lorem ipsum dolor...
    </div>
</div>

CSS

.row{
    display: table;
    margin: 0 0 50px;
    padding: 5px;
    border: 1px solid green;
    border-collapse: sepalate;
    border-spacing: 2px;
}

.cell{
    display: table-cell;
    padding: 10px;
    border: 1px solid blue;
    width: 300px;
    vertical-align: middle;
}

.float{
    float: left;
    width: 50px;
    height: 100px;
    background: skyblue;
}

.verticalfix::before{
    content: "";
    display: inline-block;
    height: 200%;
    vertical-align: middle;
    
    width: 2px;
    background: red;
}