JSFiddle - React, Tailwind, and code Playground

by dipaks2011

HTML

<div class="box">
  <div class="one">One</div>
  <div class="two">Two</div>
  <!-- <div class="three">Three</div> -->
</div>

<ol>
  <li>hi</li>
  <li>hello</li>
</ol>
<!-- <input type="checkbox" checked />
<input type="checkbox" class="custom" checked />
<input type="checkbox" /> -->

CSS

.box > * {
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
}

.box {
  border: 2px dotted rgb(96 139 168);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.one {
  flex: 1.5 1 auto;
}

.two {
  flex: 1 1 auto;
}

/* .three {
  flex: 1 1 auto;
} */
/* input {
accent-color: auto;
  display: block;
  width: 30px;
  height: 30px;
}

input.custom {
accent-color: rebeccapurple;
accent-color: deeppink;
accent-color: darkred;
} */