JSFiddle - React, Tailwind, and code Playground

HTML

<div class="w3-container">
	<div class="row1">
		<div class="paper">
			<h1>USDT Wallet</h1>
			<h3>$0.00</h3>
		</div>
		<div class="paper">
			<h1>Convert</h1>
			<button>Convert USDT to LTC*</button>
			<br><br>
			<button>Convert LTC to USDT*</button>
			<p>*1% fee applies</p>
		</div>
	</div>

	<div class="row2">
		<div class="paper">
			<h1>USDT Wallet</h1>
			<h3>$0.00</h3>
		</div>
		<div class="paper">
			<h1>Convert</h1>
			<button>Convert USDT to LTC*</button>
			<br><br>
			<button>Convert LTC to USDT*</button>
			<p>*1% fee applies</p>
		</div>
	</div>
</div>

CSS

.paper{
    height: auto;
    margin: 20px;
    padding: 20px;
    width: auto;
    background-color: white;
    box-shadow: 2px 2px 4px #888888;
}

.row1{
  background-color: red;
  height: 100%;
  width: 50%;
  display: inline-block;
  float: left;
}

.row2{
  background-color: blue;
  height: 100%;
  width: 50%;
  display: inline-block;
  float: left;
}