JSFiddle - React, Tailwind, and code Playground

by Md. Atiquzzaman Soikat

HTML

<body ng-app="myApp">
<div ng-controller="MainCtrl" style="height:100%;">
    <div class="authorised-pane">
        <div ng-controller="PanelCtrl" style="height:100%;">
            <div id="flexWrapper">
                <span class="version">Version</span>
                <span class="panel-selection-style">
                <!-- Buttons for panel selection, ie. choose content -->
                  <button class="navButton">
                    Button 1
                  </button>
                  <button class="navButton">
                    Button 2
                  </button>
                  <button class="navButton">
                    Button 3
                  </button>
                  <button class="navButton">
                    Button 4
                  </button>
                  <button class="navButton">
                    Button 5
                  </button>
                </span>

                <div ng-show="panelCtrl.tabs.graph" style="height:100%;">
                    <div class="graphCtrl" ng-controller="GraphCtrl" ng-include="graph.html" style="height:100%;">

                        <!--now inside ng-included graph.html-->
                        <span class="instrumentControls">
                      <button class="navButton">
                        Instrument Control 1
                      </button>
                      <button class="navButton">
                        Instrument Control 2
                      </button>

                            <!--contents of a replay toolbar directive-->
                      <span>
                      <button></button>
                      <button></button>
                      </span>
                      <span>
                      <button>></button>
                      <button>>></button>
                      </span>

                            <!--End of instrument controls -->
                    </span>

                        <!-- contents of chart directive -->
    ...

CSS

html, body {
    height:100%;
    margin:0;
}
.app {
  height:100%;
}

.authorised-pane {
  height: 100%;
}

#flexWrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-content: stretch;
    min-height: 100%; /*height or min-height both work */
}

.version {
    padding:5px;
    color: #777777;
    font-size: 0.8em;
}

.panel-selection-style {
    background-color: green;
    display: flex;
    flex-basis: 32px;
}

.navButton {
  padding: 5px;
}

.instrumentControls {
    display: flex;
    background-color: orange;
    flex-basis: 32px;
}

.chartControls {
    display: flex;
    background-color: blue;
    flex-basis: 32px;
}

#chart {
    background-color: yellow;
    flex:50;
    display: flex;
    flex-basis:400px;
    height: 100%;
}
/*additional css*/
.graphCtrl{
  display: flex;
  flex-direction: column;
}