JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Menu do site do Maujor &#8212; Etapa 5</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="css/css.css" type="text/css">
		<link rel="stylesheet" href="css/font-awesome.css" type="text/css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <link rel="stylesheet" href="bootstrap/bootstrap.css"> 
	<link rel="stylesheet" href="bootstrap/bootstrap.min.js"> 
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
	
	
	
</head>

<body>
	
		
	
	<article class="conteudo__total">
	<div class="row">
			<div class="col-sm-1 col-md-1">oi</div>
		
		
		<div class="col-sm-5 col-md-5">
		
		<div id="caixa_branca2">
			
			</div>
		
		</div>
		
		<div class="col-sm-6 col-md-6">
		
		<div id="caixa_branca">
			<h2>Bolos até R$30,00</h2>
			<button type="button" class="comprar_botao">Comprar</button>
			<img src="imagens/bolo_tradicional-500x333.png" class="bolo_castanha">
			</div>
		
		</div>
		
		<div class="col-sm-6 col-md-6">
		
		<div id="caixa_branca3">
			<img src="imagens/bolos-brigadeiro-com-cereais.jpg" class="bolo_brigadeiro">
			</div>
		
		</div>
		
		
		
	</article>

	

	
	
	
</body>
</html>

CSS

#caixa_branca2{
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	border-left: 1px solid black;
	border-right:1px solid black;
	height: 600px;
	width: 500px;
	margin-top: 43px;
	margin-right: 20px;
	
}
#caixa_branca{
	
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	border-left: 1px solid black;
	border-right:1px solid black;
	height: 290px;
	width: 600px;
	margin-top: 43px;
	margin-right: 40px;
	
	
}
.bolo_castanha{
	
	width: 420px;
	height: 275px;
	margin-left: 177px;
	
}
.bolo_brigadeiro{
	
	height: 285px;
}