label {

 font-family: 'Fira Sans', sans-serif;

}

<label for="ice-cream-choice">Wybierz smak:</label>

<input list="smaki-lodów" id="wybór-lodów" name="wybór-lodów">



<datalist id="smaki-lodów">

 <option value="Czekolada">

 <option value="Kokosowy">

 <option value="Mięta">

 <option value="Truskawka">

 <option value="waniliowy">

</datalist>

details {

 border: 1px solid #aaa;

 border-radius: 4px;

 padding: 0.5em 0.5em 0;

}



summary {

 font-weight: bold;

 margin: -0.5em -0.5em 0;

 padding: 0.5em;

}



details[open] {

 padding: 0.5em;

}

<details>

 <summary>Opis zawartość</summary>

 Coś wystarczająco małego, by umknąć przypadkowej uwadze.

</details>

header {

 font: bold calc(0.025 * (100vw)) Arial, sans-serif;

}

<header>Gekony to grupa zwykle małych</header>



<main>

 <p>Gekony to grupa zwykle małych, zazwyczaj nocnych jaszczurek. Występują na wszystkich kontynentach z wyjątkiem Australii.</p>

 

 <p>Wiele gatunków gekonów ma przylepne podkładki na palcach, które umożliwiają im wspinanie się po ścianach, a nawet oknach.</p>

</main>