JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="left">
        <div class="stick"></div>
        <div class="empty"></div>
        <div class="stick"></div>
    </div>
    <div class="content">Div content</div>
    <div class="right">
        <div class="stick"></div>
        <div class="empty"></div>
        <div class="stick"></div>
    </div>
</div>

CSS

.wrapper{
    border-bottom: 2px solid #FF0000;
    border-top: 2px solid #FF0000;
    height: 100px;
    width: 300px;
}
.stick{
    border-left: 2px solid #FF0000;
    height: 33%;
}
.empty{
    height: 34%;
}
.content{ float: left }
.left{ float: left; height: 100%; }
.right{ float: right; height: 100%; }
.clear{ clear: both }