JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <div class="left">
        Lorem ipsum dolor sit amet
    </div>
    
    <div class="main">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Ipsam unde incidunt pariatur magnam odit quidem natus ea qui
        praesentium ut culpa ab temporibus aliquam delectus quo animi
        eveniet quam impedit!
    </div>
    
    <div class="right">
        Lorem ipsum dolor sit amet
    </div>
</div>

CSS

.wrap {
    display: flex;
    flex-flow: row nowrap;
    
    max-width: 500px;
    
    margin: auto;
    
    background: #f2f2f2;
}

.left,
.right,
.main {
    box-sizing: border-box;
    padding: 15px;
}

.left, .right {
    width: 25%;
    
    flex-shrink: 0;
    
    background: #ccc;
}

/**/

.no-flex .wrap {
    display: table;
    
    width: 100%;
}

.no-flex .left,
.no-flex .right,
.no-flex .main {
    display: table-cell;
    vertical-align: top;
}

JavaScript

if (!('flexWrap' in document.createElement('div').style)) {

    document.documentElement.className += ' no-flex';

}