JSFiddle - React, Tailwind, and code Playground

by Ashesh Kumar

HTML

<div id="outermost">
    <div id="container">
      <div id="dummy"></div>
      <div id="element">
        k (200px)
      </div>
    </div>
    <div id="wrapper">
      <div id="row">
        <div id="left" class="lr"><div>width = k (200px)</div></div>
        <div id="incenter">incenter</div>
        <div id="right" class="lr"><div>width = k (200px)</div></div>
      </div>
    </div>
  </div>

CSS

body {
    font-size: 26px;
    text-align: center;
    font-family: monospace;
    min-width: 532px;
  }


  #outermost {
    height: 100%;
    background-color: darksalmon;
  }
  #container {
    display: inline-block;
    position: relative;
    width: 100%;
  }

  #dummy {
    margin-top: 200px;
  }

  #element {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: silver
    /* show me! */
  }

  #wrapper {
    display: table;
    width: 100%;
  }

  #row {
    display: table-header-group;
  }

  #left {
    display: table-cell;
    background-color: chartreuse;
  }

  #incenter {
    display: table-cell;
    background-color: aqua;
  }

  #right {
    display: table-cell;
    background-color: chartreuse;
  }
  .lr{
    width:200px !important;
  }