JSFiddle - React, Tailwind, and code Playground

by Chris Ball

HTML

<div class="wrapper">

  <div class="selects">
    <div class="form-control">
      <input type="search" id="one">
    </div>
    <div class="form-control">
      <input type="search" id="two">
    </div>
 </div>

  <div class="targets">
    <div class="target target-one"></div>
    <div class="target target-two"></div>
    <div class="target target-three"></div>
  </div>

</div>

SCSS

* {
  box-sizing: border-box;
}

.wrapper {
  display: flex;
  flex-direction: row;
}

.selects {
  flex: 0 0 25%;
}

.form-control {
  display: block;
  margin-bottom: 0.5rem;
}

input {
  padding: 0.25rem;
  width: 100%;
}

.targets {
  flex: 0 0 75%;
  padding-left: 0.5rem;
}

.target {
  height: 100px;
  margin-bottom: 0.5rem;
  &-one {
    background-color: #c0ffee;
  }
  &-two {
    background-color: #deface;
  }
  &-three {
    background-color: #bada55;
  }
}

JavaScript

const selector_one = document.querySelector('#select-one')
const selector_two = document.querySelector('#select-two')

document.body.addEventListener('click', function(event){
	event.preventDefault()
	console.log(document.activeElement)
})