JSFiddle - React, Tailwind, and code Playground

HTML

<form>
  <div><input placeholder="First Name" /></div>
  <div><input placeholder="Last Name" /></div>
  <div class="span-row">
    <ul class="radio_list">
      <li><input name="form" type="radio" value="0">&nbsp;<label>Male</label></li>
      <li><input name="form" type="radio" value="1">&nbsp;<label>Female</label></li>
      <li><input name="form" type="radio" value="2">&nbsp;<label>gfdg</label></li>
      <li><input name="form" type="radio" value="3">&nbsp;<label>gfdg</label></li>
      <li><input name="form" type="radio" value="4">&nbsp;<label>gfd</label></li>
    </ul>
  </div>
  <div><input placeholder="Phone" type="phone" /></div>
  <div>
    <ul class="checkbox_list">
      <li><input name="form_3" type="checkbox" value="0" checked="checked" required="required">&nbsp;<label>Checkbox 1</label></li>
      <li><input name="form_3" type="checkbox" value="1" checked="checked">&nbsp;<label>Checkbox 2</label></li>
      <li><input name="form_3" type="checkbox" value="2" checked="checked">&nbsp;<label>Checkbox 3</label></li>
    </ul>
  </div>
  <div><input placeholder="Email" type="email" /></div>

  <div class="span-col"><textarea rows="4" cols="30" placeholder="Coment"></textarea></div>
</form>

CSS

form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 10px;
}

form>div {
  box-sizing: border-box;
  margin-bottom: 0.5rem;
  break-inside: avoid;
}

form>div input:not([type=checkbox]):not([type=radio]),
form>div textarea {
  background-color: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0.25rem;
  min-height: 40px;
  width: 100%;
  box-sizing: border-box;
}

form>div ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.span-col {
  grid-column: span 2
}

.span-row {
  grid-row: span 2;
}