JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div class="form-content">
		<header>
			<h1>Контактная форма</h1>
		</header>
		<form class="form-contact grid-100" method="post">
			<div class="input-container grid-50">
				<input type="text" name="first name" placeholder="Имя" title="Введите своё имя" class="required" id="first_name" required />
			</div>
			<div class="input-container grid-50 left">
				<input type="text" name="last name" placeholder="Фамилия" title="Введите свою фамилию" class="required" id="last_name" required />
			</div>
			<div class="footer grid-100">
				<button id="submit" type="submit" class="btn">Отправить</button>
			</div>
		</form>
	</div>
</body>

CSS

body{
	background-color: #666666;
}

.left {
	float: left !important;
}

.grid-50 {
	float: left;
	width: 50%;
}

.grid-100 {
	clear: both;
	width: 100%;
}

.form-content {
	width: 420px;
	background-color: #ffffff;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

.input-container{
	position: relative;
}

.form-contact input[type="text"] {
	height: 100%;
	width: 100%;
	vertical-align: middle;
	display: inline-block;
	border: none;
	padding: 0 20px;
}

.form-contact input[type="text"]:focus {
	outline: 0;
	background-color: rgba(220, 234, 241, 1.0);
}

.form-content header {
	padding-top: 10px;
	width: 100%;
	text-align: center;
}

.form-contact .input-container {
	border-top: 1px solid #e5e5e5;
	height: 50px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.form-contact .input-container.left {
	border-left: 1px solid #e5e5e5;
}