HTML
<html>
<body>
<section>
<fieldset>
<legend>Aplicando (align-items)</legend>
<label><input type="radio" name="align-items" value="baseline"> Baseline</label>
<label><input type="radio" name="align-items" value="center" checked> Center</label>
<label><input type="radio" name="align-items" value="flex-end"> Flex-end</label>
<label><input type="radio" name="align-items" value="flex-start"> Flex-start</label>
<label><input type="radio" name="align-items" value="inherit"> Inherit</label>
<label><input type="radio" name="align-items" value="stretch"> Stretch</label>
<label><input type="radio" name="align-items" value="unset"> Unset</label>
</fieldset>
<fieldset>
<legend>Aplicando (justify-content)</legend>
<label><input type="radio" name="justify-content" value="center"> Center</label>
<label><input type="radio" name="justify-content" value="flex-end"> Flex-end</label>
<label><input type="radio" name="justify-content" value="flex-start"> Flex-start</label>
<label><input type="radio" name="justify-content" value="flex-start"> Inherit</label>
<label><input type="radio" name="justify-content" value="initial" > Initial</label>
<label><input type="radio" name="justify-content" value="space-around"> Space-around</label>
<label><input type="radio" name="justify-content" value="space-between" checked> Space-between</label>
</fieldset>
</section>
<section>
<div>
<h1>Evento Capuava</h1>
<p>Venha conhecer a estrutura do autódromo de Capuava, onde você encontrará diversas curvas desafiadoras, que fará você melhorar muito sua técnica.</p>
<button>Saber mais</button>
</div>
<div>
<h1>Evento ECPA</h1>
<p>Nosso autódromo é bem técnico onde você poderá aplicar todo o seu conhecimento, assim melhorar muito mais sua técnica.</p>
<button>Saber mais</button>
</div>
<div>
<h1>Evento Tuiuti</h1>
<p>Nosso autódromo dispõe de uma infra muito boa onde você pode trazer seus familiares tornando seu treino um evento de família.</p>
<button>Saber mais</button>
</div>
<div>
<h1>Evento Interlagos</h1>
<p>Nosso autódromo exigirá muito de você, venha correr no templo da velocidade.</p>
<button>Saber mais</button>
</div>
</section>
</body>
</html>
CSS
body {
width: 100%;
}
fieldset {
border: .1em solid black;
margin: 1em;
padding: 1em;
}
section:nth-child(2) {
border: .1em solid red;
display: flex;
align-items: center;
justify-content: space-between;
}
div {
border: .1em solid black;
margin: 1em;
text-align: center;
width: 200px;
padding: 1em;
}
h1 {
text-transform: uppercase;
font-weight: bold;
margin: 1em;
font-size: 120%;
}
p {
margin: 1em;
font-size: 110%;
}
button {
width: 70%;
font-size: 120%;
}
input[value="baseline"]:checked section:nth-child(2) {
align-items: baseline;
}
input[value="center"]:checked section:nth-child(2) {
align-items: center;
}
input[value="flex-end"]:checked section:nth-child(2) {
align-items: flex-end;
}
input[value="flex-start"]:checked section:nth-child(2) {
align-items: flex-start;
}
input[value="inherit"]:checked section:nth-child(2) {
align-items: inherit;
}
input[value="stretch"]:checked section:nth-child(2) {
align-items: stretch;
}
input[value="unset"]:checked section:nth-child(2) {
align-items: unset;
}