JSFiddle - React, Tailwind, and code Playground

HTML

<div id="book">
    <div class="left">
    <div class="book" style="height:310px; width:200px">...</div>
    <div class="book" style="height:100px; width:200px">...</div>
    <div class="book" style="height:500px; width:200px">...</div>
    </div>
    <div class="right">
    <div class="book" style="height:400px; width:200px">...</div>
     <div class="book" style="height:150px; width:200px">...</div>
    <div class="book"style="height:200px; width:200px">...</div>
    <div class="book" style="height:40px; width:200px">...</div>
    </div>
</div>

CSS

body{padding:25px;}
#book{text-align:center;outline:5px solid aqua;}
.book{
    display:inline-block;

    border:1px dotted silver;background-color:pink;margin:9px 0;text-align:center;
}
.left{
    float:left;
    width:200px;
}
.right{
    float:left;
    margin-left:18px;
    width:200px;
}