JSFiddle - React, Tailwind, and code Playground

HTML

<div class=m>
  <div class=l_1>
    <div class=b_1>
      Left text
      <div class=b_row>
        <div class=b_item>Item 1
          <br>
          <input class=datepicker type=text size=10>
        </div>
        <div class=b_item>Item 2
          <br>
          <input class=datepicker type=text size=10>
        </div>
      </div>
    </div>
  </div>
  <div class=r_1>Right Item</div>
</div>

CSS

.m {
  display: flex;
  flex-wrap: wrap;
}

.l_1 {
  background-color: red;
  flex: 1;
  padding: 15px;
  margin-left: auto;
  margin-right: auto;
}

.r_1 {
  background-color: yellow;
  flex: 1;
  padding: 25px;
  margin-left: auto;
  margin-right: auto;
}

.b_1 {
  padding: 15px;
  border-radius: 4px;
  /*background-color: #febb02;
	border-color: #e2aa11;*/
  background-color: <? e($_COLORS['emph']);
  ?>;
  border: 1px solid <? e($_COLORS['emph_dark']);
  ?>;
}

.b_row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.b_item {
  flex: 1;
}