HTML
<main>
<section>
<header><h1>Fórmulas químicas más comunes</h1></header>
<div class="chimestry">
<div class="header"><h2>Compuesto</h2></div>
<div class="header"><h2>Formula Química</h2></div>
<div class="item">Dióxido de carbono</div>
<div class="item">CO<sub>2</sub></div>
<div class="item">Agua Oxigenada</div>
<div class="item">H<sub>2</sub>O<sub>2</sub></div>
<div class="item">Amoniaco</div>
<div class="item">NH<sub>3</sub></div>
<div class="item">Butano</div>
<div class="item">C<sub>4</sub>H<sub>10</sub></div>
</div>
</section>
<section>
<header><h1>Fórmulas físicas más comunes</h1></header>
<div class="math">
<div class="header"><h2>Nombre</h2></div>
<div class="header"><h2>Fórmula</h2></div>
<div class="item">Teorema de Pitágoras</div>
<div class="item">a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></div>
<div class="item">Raíz cuadrada de menos uno</div>
<div class="item">i<sup>2</sup> = -1</div>
<div class="item">Relatividad</div>
<div class="item">E = mc<sup>2</sup></div>
<div class="item">Teoría del caos</div>
<div class="item">x<sub><em>t</em>+1</sub> = kx<sub>
<em>t</em></sub> (1 - x<sub><em>t</em></sub>)</div>
</div>
</section>
</main>
CSS
header {
margin: 2rem 0;
}
section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.chimestry, .math {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(5, 40px);
width: 80%;
}
.item {
width: 100%;
height: 100%;
border: 1px solid white;
padding-left: 1rem;
}
.header {
text-align: center;
margin-bottom: 1rem;
}