JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<div class="options">
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input...
CSS
.container {
height: 150px;
width: 300px;
display: flex;
flex-direction: column;
overflow-y: auto;
border: 1px solid #000;
padding: 4px;
}
.options {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.spacer {
flex: 1 1 auto;
}
.buttons {
display: flex;
flex-direction: row;
justify-content: space-between;
}