JSFiddle - React, Tailwind, and code Playground

by Hashem Qolami

HTML

<div id="all">
<div id="one">one</div>
<div id="two">two</div>
<div id="main">main para goes here main para goes here main para goes here main para goes here main para goes here main para goes here main para goes here main para goes here main para goes here main para goes here main para goes here main para goes here main para goes here </div>
</div>

CSS

html, body {
    width: 100%;
    padding: 0; margin: 0;
}

#all {
    height: 300px;
    background: gold;
    width: 100%;
    
    font-size: 0;
}

#all:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}


#one, #two, #main {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    
    font-size: 1rem;
}

#one, #two {
    width: calc((100% - 250px) / 2);
}

#two{
    left: 250px;
    text-align: right;
}
#main{
    right: calc((100% - 250px) / 2);
    
    width: 250px;
    background-color: orange;
}