JSFiddle - React, Tailwind, and code Playground

by Rozina Szogyenyi

HTML

<div class="checkbox-list">
      <label>
        <input type="checkbox"> Air-conditioned public areas
       </label>
       <label>
         <input type="checkbox"> Air-conditioned rooms 
        </label>
        <label>
          <input type="checkbox"> Environmentally friendly 
         </label>
         <label>
           <input type="checkbox"> Free bicycle
         </label>
         <label>
           <input type="checkbox"> Free parking
         </label>
         <label>
           <input type="checkbox"> Free Wi-Fi 
         </label>
         <label>
           <input type="checkbox"> Internet access     
         </label>
         <label>
           <input type="checkbox"> Multilingual staff 
         </label>
         <label>
           <input type="checkbox"> Parking lot
         </label>                  
         <label>
           <input type="checkbox"> Smoke-free property 
         </label>
         <label> 
           <input type="checkbox"> Wireless internet   
         </label>
    </div>

CSS

.checkbox-list {
  column-count: 2;
}

.checkbox-list label {
  font-family: sans-serif;
  font-size: 13px;
  flex: 0 0 50%;
  font-weight: 400;
  margin-bottom: 5px;
  color: #969aa1;
  display: block;
}

.checkbox-list label:hover {
  color; 
}