JSFiddle - React, Tailwind, and code Playground

by Masatoshi Ohta

HTML

<header id="header">Header</header>
<div id="container">
  <div id="sidebar1">Sidebar</div>
  <div id="main">Main<br>Main<br>Main</div>
  <div id="sidebar2">Sidebar</div>
</div>
<footer id="footer">Footer</footer>

CSS

#container {
  display: box;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;  
}
#sidebar1, #sidebar2 {
  background: pink;
  width: 100px;
}
#main {
  background: cyan;
  /* 横幅を拡張する */
  box-flex: 1;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -ms-box-flex: 1;
}

#footer, #header {
  background: lightgray;
}

/* レスポンシブデザイン
 * （幅が狭い場合はサイドバーを横幅いっぱいに表示する）
 */
@media screen and (max-width: 400px) {
  #container {
    display: block;
  }
	#sidebar1, #sidebar2 {
    width: auto;
  }
}