JSFiddle - React, Tailwind, and code Playground

HTML

<form class="myForm">
            <h2>Lorem ipsum</h2>
            <p>text</p>
            <div class="fields">
              <label class="left">First Name
              <input type="text" name="other"></label>
              <label class="right">Last Name
              <input type="text" name="other"></label>
              <label class="left">text
              <input type="text" name="other"></label>
              <label class="right">text
              <input type="text" name="other"></label>
              <label class="left">text
              <input type="text" name="other"></label>
              <label class="right">text
              <input type="text" name="other"></label>
              <label class="left">text
              <input type="text" name="other"></label>
              <div class="radio right">
    <label>Some text</label><br>
              <label class="label">
                <input type="radio" name="phone" value="phone">Phone</label>
              <label class="label close">
                  <input type="radio" name="email" value="email">Email</label>
            </div>
            <div class="msg">
              <label>Message</label>
              <textarea rows="5"></textarea>
              </div>
              </div>
              <button type="button" name="button">Send</button>
              </form>

CSS

.myForm {
  padding: 40px 20px;
}

.myForm h2, .myForm p {
  text-align: center;
  padding: 0 10px;
}

.myForm h2 {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: bold;
  font-family: "Sansita", sans-serif;
}

.myForm p {
  margin-bottom: 20px;
  font-size: 12px;
}

.myForm label {
  font-size: 14px;
}

form input {
  border: 1px solid #a9a9a9;
  border-radius: 3px;
  height: 25px;
  width: 96%;
  margin: 10px 0;
  font-size: 14px;
  padding: 5px;
}

.label, .radio input[type="radio"] {
  display: inline;
  float: left;
  width: auto;
  margin: 10px 0;
  padding: 0 10px;
}

input[type="radio"],
input.radio {
    vertical-align:text-top;
    width:13px;
    height:13px;
    padding:0;
    margin:0;
    position:relative;
    overflow:hidden;
    top:-8px;
    right: 5px;
}

.msg textarea {
  width: 96%;
  border: 1px solid #a9a9a9;
  border-radius: 3px;
  margin: 10px 0;
  font-size: 14px;
  padding: 5px;
  display:block;
}

form button {
  background-color: #a9a9a9;
  color: #fff;
  width: 100%;
  text-transform: uppercase;
  padding: 10px;
  border: none;
  border-radius: 3px;
}


@media only screen and (min-width: 768px) {
  /*Left form column*/
  .left {
    display: block;
    float: left;
    width: 48%;
  }
/*Right form column*/
  .right {
    display: block;
    float: right;
    width: 48%;
  }


  .label, .radio input[type="radio"] {
    padding-right: 30px;
    padding-left: 30px;
  }
  
  
  }