JSFiddle - React, Tailwind, and code Playground

HTML

<div class="layout1">
		<div class = "layout11">
			<div class = "layout111"></div>
			
			
			<div class = "layout112">
				<input type = "text" value = "столбцы">
				
			
			</div>
			
			
		</div>
		
		<div class = "layout12">
			<input type = "text" value = "столбцы">
		</div>
		
		
	</div>

CSS

body{
	background-color:#000000;
	margin:auto;
	padding-top:10px;
}

.layout1{
	background-color:#1d254a;
	display:block;
	height:1000px;
	width:600px;
	
	margin:auto;
}

.layout11{
	
	display:block;
	height:100px;
	background-color:#9b8be8;
}
.layout111{
	
	display:inline-block;
	height:80px;
	width:120px;
	margin:10px;
	background-color:#f8665c;
	
	
	
}
.layout111:hover{
	background-color:#faa19f;
}
.layout112{
	display:inline-block;
	width:200px;
	height:100px;
	margin: auto;
	background-color:white;
}



.layout12{
	display:block;
	height:600px;
	background-color:#9b8be8;
	margin-top:30px;
}