estou tentando posicionar lado a lado dois textareas que estão dentro de duas sections mas não estou conseguindo saber exatamente oq fazer. A minha ideia é que seja um projetinho responsivo.
body{
padding:0px;
margin:0px;
display:grid;
grid-template-areas:
"header header header"
"main main main"
"footer footer footer";
}
header{
background-color:blue;
grid-area:header;
}
.principal{
background-color:red;
grid-area:main;
}
.rodape{
grid-area:footer;
background-color:green;
}
.titulo{
background-color:purple;
text-align:center;
}
.area1{
margin:10px;
background-color:yellow;
width:350px;
}
.area2{
margin:10px;
background-color:blue;
width:350px;
}
.botoes{
display:flex;
}
<!DOCTYPE html>
<html lang="pt=br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>teste</title>
</head>
<body>
<header class="cabecalho">logo</header>
<main class="principal">
<div class="titulo">
<h1>esse é o titulo principal</h1>
</div>
<section class="area1">
<div>
<textarea cols="10"rows="8" class="txt1">
</textarea>
</div>
<div class="botoes">
<button>botao</button>
<button>botao</button>
</div>
</section>
<section class="area2">
<div>
<textarea cols="20"rows="8" class="txt2"></textarea>
</div>
<div>
<button>botao</button>
</div>
</section>
</main>
<footer class="rodape">rodape</footer>
</body>
</html>