CSS - zobrazení dlouhého textu na dva řádky - prosím o radu

Proč neukážeš přímo kód? Takhle se můžeme jenom dohadovat, proč ti to nefunguje.

...
<li class="product">
    <a class="image" href="path">
        <img width="500" height="500"... />	
    </a>
    <a href="path">
        <strong>Long title</strong>
    </a>
    <span class="price"><strong><p>65,00 K&#269; bez DPH</p></strong><p>(75,00 K&#269; s DPH)</p></span>
...

Zobrazí se obrázek. Pod ním se vlevo zobrazí název a vpravo se zobrazí pod sebou dva názvy.
Pokud je však název vlevo příliš dlouhý a zasahuje do názvů vpravo, názvy vpravo se posunou dolů.
Nejen, že to vypadá nevzhledně, ale taky se změní jeho výška.
Pod obrázkem je však dost místa, aby se příliš dlouhý text zobrazoval na dvou řádcích. - To by celý problém vyřešilo

Malo by stačiť nastaviť tomu elementu vľavo maximálnu šírku a spôsob zobrazovania (display) na inline-block. Druhá možnosť je použiť flexbox alebo grid.

Je to tak.

@MichalDM
Vy máte momentálně ten titulek i tu cenu jako řádkové elementy v jednom bloku dohromady. Ten titulek dosáhne konce řádku až na konci celého boxu s produktem a odsune další řádek s cenou vždy pod sebe. Musíte je buďto obalit do samostatných bloků (třeba div-ů), nebo jak radí moose je v CSS převést na inline-block.

Díky, nakonec jsem to udělal jinak. (Spanu, ve kterém je cena, jsem nastavil display: flex) Je to pouze seznam souvisejících produktů na konci stránky, takže to vadit nebude. (Běžně se u produktu to zobrazuje pod sebou)

Jen jsem se chtěl zeptat, jaký je rozdíl mezi

display: flex;

a

display: inline-flex;

V obou případech se to zobrazuje stejně, takže v čem je, prosím Vás, vlastně rozdíl?

Odporúčam prečítať: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ a https://www.w3.org/TR/css-flexbox-1/