JSFiddle - React, Tailwind, and code Playground

HTML

<div class="group">
    <div class="text">
        <label for="text1">First name</label>
        <input type="text" name="text1" id="text1">
    </div>
    <div class="text">
        <label for="text2">Last name</label>
        <input type="text" name="text2" id="text2">
    </div>
    <div class="text">
        <label for="text3">dom</label>
        <input type="text" name="text3" id="text1">
    </div>
    <div class="text1">
        <label for="text4">korpus</label>
        <input type="text" name="text4" id="text2">
    </div>
</div>

CSS

label{
    font-size: 40px;}
.text {
    box-sizing:border-box;
    width:49%;
    font-size::24px;
    float:right;
    padding:5em;
    background:#fff;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}
.text:first-child {float:left;}
.text input {
  
    box-sizing:border-box;
    width:100%;
    padding:8px;
    border:2px solid #cce;
}

.text1 {
    box-sizing:border-box;
    width:49%;
    font-size::24px;
    float:right;
    padding:5em;
    background:#fff;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}
.text1:first-child {float:left;}
.text1 input {
  
    box-sizing:border-box;
    width:100%;
    padding:8px;
    border:2px solid #cce;
}