JSFiddle - React, Tailwind, and code Playground
HTML
<div id="body-container">
<div class="blurb-rows">
<div class="blurb-stacks">
<blurb>
<div class="blurb-header"><h2>Restaurant</h2></div>
<ul>
<li>one banana</li>
<li>two banana</li>
<li>three banana</li>
<li>four banana</li>
<li>five banana</li>
<li>six banana</li>
<li>seven banana</li>
<li>eight banana</li>
<li>nine banana</li>
</ul>
</blurb>
<blurb>
<div class="blurb-header"><h2>Image Gallery</h2></div>
<gallery>
<img src="blank.png">
<img src="blank.png">
<img src="blank.png">
<img src="blank.png">
</gallery>
</blurb>
</div>
<blurb class="small">
erbonsd<br>
erbonsd<br>
erbonsd<br>
erbonsd<br>
<a href="reservation.html">erbonsd<br></a>
erbonsd<br>
erbonsd<br>
erbonsd<br>
erbonsd<br>
v
v
erbonsd<br>
v
</blurb>
</div>
<div class="blurb-rows">
<blurb>
<div class="blurb-header"><h2>12345 Reviews</h2></div>
</blurb>
</div>
</div>
CSS
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
#body-container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: column;
flex-flow: column;
-webkit-flex-direction: column;
flex-direction: column;
padding-bottom: 10px;
background: #ccd7cd;
margin-top: 45px;
}
.blurb-rows {
background: #ccd7cd;
padding: none;
display: -webkit-flex;
display: flex;
outline: 2px solid purple;
}
.blurb-stacks {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-flex: 3 0 0;
flex: 3 0 0;
}
blurb {
display: block;
outline: 2px solid red;
margin: 5px;
padding: 10px;
background: #fffeee;
//-webkit-flex: 3 0 auto;
// flex: 3 0 auto;
}
.small {
-webkit-flex: 1 0 0;
flex: 1 0 0;
}
gallery {
width: 100%;
overflow-y: hidden;
overflow-x: auto;
height: 200px;
display: inline-block;
outline: 2px solid green;
white-space: nowrap;
padding-bottom: 10px;
}
img {
height: 100%;
margin: 5px;
}