vGNWpz

index.html

<div class="sidebar">
  <label for="margin">MARGIN</label>
  <div class="vtm-checkbox__wrapper">
      <label class="">
        <input type="checkbox" name="all" value="all" checked />
        <span>All</span>
      </label>
      <label class="">
        <input type="checkbox" name="top" value="top" checked />
        <span>t</span>
      </label>
      <label class="">
        <input type="checkbox" name="right" value="right" />
        <span>r</span>
      </label>
      
      <label class="">
        <input type="checkbox" name="bottom" value="bottom" />
        <span>b</span>
      </label><label class="">
        <input type="checkbox" name="left" value="left" />
        <span>l</span>
      </label>
    
  </div>
  <div class="select-box">
    <select name="sizes" id="">
      <option value="none">None</option>
      <option value="xs">X-Small</option>
      <option value="sm">Small</option>
      <option value="md">Medium</option>
      <option value="lg">Large</option>
      <option value="xl">X-Large</option>
    </select>
  </div>

</div>

style.css

.sidebar {
  width: 340px;
  padding: 1em;
  background: black;
  color: white;
}
.vtm-checkbox__wrapper {
  display: flex;
  margin: 1em 0;
  justify-content: space-between;
  input[type="checkbox"]{
    display: none;
    + span{
      text-transform: uppercase;
      background: grey;
      width: 40px;
      height: 40px;
      padding: 5px;
      outline: 1px dotted darkgrey;
    }
    &:checked {
      + span{
        background: green;
      }
    }
  }
}

vGNWpz.markdown

vGNWpz

A Pen by Dhruv Patel on CodePen.

License.