JSFiddle - React, Tailwind, and code Playground

HTML

<div class='container'>
    <div class='column left'>left</div>
    <div class='column middle'>middle</div>
    <div class='column right'>right</div>
</div>

CSS

body,
html {
    height: 100%;    
}
.container {
    display: flex;
    height: 100%;
    width: 100%;
}

.column {
    color: white;
    text-align: center;
}

.left {
    background-color: #111;
    
    min-width: 150px;
    max-width: 480px;
    width: 100%;
}

.middle {
    background-color: #222;
    
    flex-shrink: 0;
    width: 600px;
}

.right {
    background-color: #333;

    flex-shrink: 0;
    width: 200px;
}