JSFiddle - React, Tailwind, and code Playground

HTML

<!-- http://www.sharpbyte.net -->

<div class="borderLayout">
	<div class="top">top</div>
	<div class="left">left</div>
	
	<div class="center">

    <!-- They can be safely nested... -->
    <div class="borderLayout">	    
      <div class="top">top</div>
      <div class="left">left</div>
      <div class="center">

        <!-- They can be safely nested... -->
        <div class="borderLayout">	    
          <div class="top">top</div>
          <div class="left">left</div>
          <div class="center">

            <!-- Attribution for the following image: https://en.wikipedia.org/wiki/File:PinkFloyd-album-ummagummastudio-300.jpg -->
            <img src="https://upload.wikimedia.org/wikipedia/en/1/16/PinkFloyd-album-ummagummastudio-300.jpg">

          </div>
          <div class="right">right</div>	
          <div class="bottom">bottom</div>      
        </div>  

      </div>
      <div class="right">right</div>	
      <div class="bottom">bottom</div>      
	  </div>  
    
	</div>  

  <div class="right">right</div>	
	<div class="bottom">bottom</div>	
</div>

CSS

div { 
  border: 1px solid #909090
}

.borderLayout {
  display: table;  
  width: 100%
}

.borderLayout .top {
	display: table-row;
}

.borderLayout .left {
    display: table-cell;
    vertical-align: middle;
    width: 10%;
  }

.borderLayout .center {
    display: table-cell;
    vertical-align: middle;
}

.borderLayout .right {
    display: table-cell;
    vertical-align: middle;
    width: 10%;
  }
  
.borderLayout .bottom {
	display: table-row;	
}