JSFiddle - React, Tailwind, and code Playground

by fred02138

HTML

<div id="outer">
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
</div>

CSS

#outer {
      display: -webkit-flex;
      -webkit-flex-direction: row;
      display: flex;
      flex-direction: row;
      width: 100%;    
}

#div1{
    height:auto;
    text-align:center;
    width:290px;
    left:0;
    border: 1px solid #ccc;
}

#div2{
    overflow: scroll;
    border: 1px solid #ccc;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
}

#div3{
    width: 420px;
    border: 1px solid #ccc;
    right:2px;
    padding:10px;
}