JSFiddle - React, Tailwind, and code Playground

Horizontal Container Mockup with Flexbox

by nilloc

HTML

<!-- Horizontal container flexing (needed for toolbar to start)-->
<modkit-container id="editor" row="1" col="1">
  <modkit-container id="toolbar" row="1" col="n">
    <modkit-style>
      default{}
    </modkit-style>

    <modkit-container id="language-select">
      lang
    </modkit-container>
    <modkit-container id="controls">
      controls
    </modkit-container>
    <modkit-container id="spacer1"></modkit-container>
    <modkit-container id="program">
      program
    </modkit-container>
    <modkit-container id="spacer2"></modkit-container>
    <modkit-container id="tabs">
      tabs
    </modkit-container>

  </modkit-container>
  <modkit-container id="center-mark"></modkit-container>
</modkit-container>

SCSS

*{
  box-sizing:border-box;
}
modkit-container{
  display:block;
  user-select:none;
  overflow:hidden;
}

modkit-style{
  display:none;
}

/* stack */
modkit-container[row="1"][col="1"] > modkit-container{
  position:absolute;
}

modkit-container[row="1"][col="n"], modkit-container[col="1"][row="n"]{
  display: flex;
  flex-wrap: nowrap;
}
modkit-container[row="1"][col="n"]{
  flex-direction: row;
}
modkit-container[row="n"][col="1"]{
  flex-direction: column;
}

// the following would be 
#editor{
  position:absolute;
  background:darkgray;
  top:0;
  left:0;
  bottom:0;
  right:0;
}
#toolbar{
  top:0;
  left:0;
  right:0;
  height:60px;
  background:lightgray;
  padding:2px;
  align-items: center;
}
#toolbar > modkit-container{
  text-align:center;
  /* padding:10px; */
  padding-top:10px;
}

#language-select{
  flex:none;
  height:50px;
  width:50px;
  background:red;
  align-self:flex-end;

}
#controls{
  flex:none;
  height:40px;
  width:200px;
  background:orange;
  @media (max-width:475px){
    // collapsed controls
    width:80px;
  }
}
#spacer1{
  flex:1;
}
#program{
  min-width:100px;
  height:40px;
  width:150px;
  background:yellow;
}
#spacer2{
  flex:3;
}
#tabs{
  flex:none;
  height:40px;
  width:120px;
  background:green;
  @media (max-width:475px){
    /* display:none; */
    width:80px;
  }
}

// for debugging
#center-mark{
  width:1px;
  height:100%;
  background:blue;
  top:0;
  left:calc(50% - 0.5px);
  z-index:1000;
}