V moderních prohlížečích je naštěstí podporovaná ještě jedna vlastnost a to display: flex;, díky které se dají snadno udělat layouty, které by jinak bylo nutné dělat pomocí floatování nebo pozicování.

V úplně základní podobě vypadá takto:

<div class="doporuceni">
    <div class="prvni">Kurz byl ohromně přínosný.</div>
    <div>Kurz byl úplně nejvíc přínosný a dal mi nejvíc.</div>
    <div>Kurz byl rozhodně přínosný.</div>
</div>

.doporuceni {
    display: flex;
    background-color: skyblue;
}

.doporuceni div {
    margin: 10px;
    padding: 10px;
    font-size: 70%;
    background-color: gold;
}

Všimni si, že prvky se roztahují podle obsahu.

Výchozí chování lze, podobně jako další chování prvků v elementu s display: flex; změnit.

.doporuceni div {
    …
    flex: 1;
}

.doporuceni .prvni { flex: 2; }

Nebo napřklad změnit pořadí zobrazení prvků

.doporuceni {
    …
    flex-direction: row-reverse;
}

Možnosti flexboxu jsou široké a i proto je jejich pokrytí nad rámec tohoto kurzu.

Určitě si je ale vyzkoušej sama, dále najdeš odkazy na stránky, které ti s tím pomůžou.

Česky

Článek o flexboxu na Vzhůru dolů a především tamtéž o položkách a kontejnerech.

Anglicky

Flexbox Froggy je hra, při které se naučíš jednotlivé vlastnosti, kterými můžeš ovlivňovat chování prvků ve flexible boxu.

Flexy Boxes je nástroj, kde si můžeš interaktivně měnit vlastnosti a zkoumat co to dělá. Vygenerovaný kód s prefixy pro jednotlivé prohlížeče nepoužívej, lepší je využít autoprefixer.

A Complete Guide to Flexbox na css-tricks.com

Flexbox tutorial na Interneting Is Hard

Flexbox na cssreference.io