JSFiddle - React, Tailwind, and code Playground

by mmetsalu

HTML

<div>

<p>My example:</p>

<div style="float:left; display:block; width: auto; border: solid 2px red; padding: 2px;">
  <div>
    <div style="float:left; display: block; border: solid 2px yellow; padding:2px;">
      <div style="float:left; display: block; border: solid 2px green;">
        auto take up needed space
      </div>
      <div class="" style="float:left; position:relative; display:block; border: solid 2px blue;">
       flex take up remaining space
      </div>
    </div>
  </div>
</div>

</div>

CSS

.flex-container {
  display: flex;
  border: solid 2px red;
  padding: 2px;
  flex: 1;
}

.flex-container.width {
  width: 300px;
}

.flex-container.inner {
  border: solid 2px yellow;
}

.auto-width {
  display: inline-block;
  border: solid 2px green;
}

.flex-width {
  display: inline-block;
  border: solid 2px blue;
  flex: 1;
}