JSFiddle - React, Tailwind, and code Playground
by OFark
HTML
<div id="container">
<div id="column1">
<h3>Design Glass</h3>
<ul id="ulGlassDesignOptions" class="glasslist radioList">
<li><label>3 Drop Diamond Blue</label></li>
<li><label>3 Drop Diamond Green</label></li>
<li><label>3 Drop Diamond Red</label></li>
<li><label>Brass Art Clarity</label></li>
<li><label>Classic</label></li>
<li><label>Crystal Bohemia</label></li>
<li><label>Crystal Diamond</label></li>
<li><label>Crystal Harmony Blue</label></li>
<li><label>Crystal Harmony Frost</label></li>
<li><label>Crystal Harmony Green</label></li>
<li><label>Crystal Harmony Red</label></li>
<li><label>Enfield</label></li>
<li><label>English Rose</label></li>
<li><label>Finesse</label></li>
<li><label>Flair</label></li>
<li><label>Fleur</label></li>
<li><label>Mackintosh Rose</label></li>
<li><label>Murano Black</label></li>
<li><label>Murano Blue</label></li>
<li><label>Murano Green</label></li>
<li><label>Murano Red</label></li>
<li><label>None</label></li>
<li><label>Staxton</label></li>
<li><label>Zinc Art Abstract</label></li>
<li><label>Zinc Art Clarity</label></li>
<li><label>Zinc Art Elegance</label></li>
</ul>
</div>
<div id="column2">
<h3>Pattern Glass</h3>
<ul id="ulGlassPatternOptions" class="glasslist radioList">
<li><label>Clear</label></li>
<li><label>Autumn</label></li>
<li><label>Chantilly</label></li>
<li><label>Charcoal Sticks</label></li>
<li><label>Contora</label></li>
<li><label>Cotswold</label></li>
<li><label>Digital</label></li>
<li><label>Everglade</label></li>
<li><label>Flemish</label></li>
<li><label>Florielle</label></li>
<li><label>Mayflower</label></li>
<li><label>Minster</label></li>
<li><label>Oak</label></li>
<li><label>Pelerine</label></li>
<li><label>Satin</label></li>
...
SCSS
#container {
display: flex;
position: absolute;
min-width: 50vw;
left: 10vw;
top: 0;
> div {
flex: 1 1 auto;
ul {
padding: 0;
max-height: 50vh;
display: flex;
flex-direction: column;
flex-wrap: wrap;
list-style: none;
}
}
}