JSFiddle - React, Tailwind, and code Playground

by jonahe

HTML

<div class="container">
  <div class="text">
    <div>
        test       
    </div>
    <div>
        test       
    </div>
  </div>
  <div class="picture">
    a picture
  </div>
</div>

CSS

.container {
  display: flex;
  width: 100%;
  height: 100%;
  border: 1px solid green;
}

.text, .picture {
  height: 200px;
  border: 1px solid red;
  box-sizing: border-box;
}

.picture {
   /* fixed width */
   width: 200px;
   max-width: 15%;
}

.text div {
  height: 50%;
  border: 1px dotted tomato;
}

.text {
  width: 100%;
  /* using 100% - the fixed width  */
  max-width: calc(100% - 200px);
}