JSFiddle - React, Tailwind, and code Playground

HTML

<div id="form">
    <br/>
    <br/>
    <form id="form_container">	
        <span class="row">
				<span class="cell"><select></select></span>
	            <span class="cell"><input type="text" /></span>
        </span>
        <span class="row">
				<span class="cell"><input type="email" /></span>
        </span>
        <span class="row">
				<span class="cell"><select></select></span>
        </span>
        <span class="row">
				<span class="cell"><select></select></span>
        </span>
        <span class="row">
				<span class="cell"><select></select></span>
        </span>
        <span class="row">
				<span class="cell"><input type="text" /></span>
	            <span class="cell"><select></select></span>
        </span>
        <span class="row">
			<span class="cell"><input type="checkbox" /><b>I have read the</b> <a>Terms & Conditions</a></span>
        </span>
        <input type="image" src="img/send_button.png" />
    </form>
</div>

CSS

#form_container {
    
}

.row {
  
}

.cell {
    border:1px solid #C1DAD6;
    display: inline-block;
    margin: 3px;
}

/* one item */
.cell:first-child:nth-last-child(1) {
    width: 100%;
}

/* two items */
.cell:first-child:nth-last-child(2) {
    width: 50%;
}

input, select {

    padding: 5px;

    border-radius: 5px;

}