It is necessary to make a block of two columns. The left one says "Description", and the right one is the description text itself. It is not possible to set the width to 50% for the "Description". In fact, it is displayed as 15-20%, that is less than necessary. The right column with the description text, on the contrary, occupies much more than the remaining 50%.

<div class="text_block" style="display:flex;flex-direction:row"> <p style="width:50%">ОписаниС</p> <p>ΠŸΡƒΡ…ΠΎΠ²ΠΈΠΊ ΠΈΠ· качСствСнного ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π°. ΠœΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π» синтСтика,ΠΌΠ΅Ρ…. Π Π°Π·ΠΌΠ΅Ρ€ xl. ДоступСн Ρ‚Π°ΠΊΠΆΠ΅ Π² Π΄Ρ€ΡƒΠ³ΠΈΡ… Ρ€Π°Π·ΠΌΠ΅Ρ€Π°Ρ…</p> </div>

    2 answers 2

    The first paragraph needs to be set to flex-shrink: 0 so that it does not shrink:

     <div class="text_block" style="display:flex"> <p style="width: 50%; flex-shrink: 0">ОписаниС</p> <p>ΠŸΡƒΡ…ΠΎΠ²ΠΈΠΊ ΠΈΠ· качСствСнного ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π°. ΠœΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π» синтСтика,ΠΌΠ΅Ρ…. Π Π°Π·ΠΌΠ΅Ρ€ xl. ДоступСн Ρ‚Π°ΠΊΠΆΠ΅ Π² Π΄Ρ€ΡƒΠ³ΠΈΡ… Ρ€Π°Π·ΠΌΠ΅Ρ€Π°Ρ…</p> </div>

    Or set the two paragraphs in width: 50%

     <div class="text_block" style="display:flex"> <p style="width: 50%">ОписаниС</p> <p style="width: 50%">ΠŸΡƒΡ…ΠΎΠ²ΠΈΠΊ ΠΈΠ· качСствСнного ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π°. ΠœΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π» синтСтика,ΠΌΠ΅Ρ…. Π Π°Π·ΠΌΠ΅Ρ€ xl. ДоступСн Ρ‚Π°ΠΊΠΆΠ΅ Π² Π΄Ρ€ΡƒΠ³ΠΈΡ… Ρ€Π°Π·ΠΌΠ΅Ρ€Π°Ρ…</p> </div>

    • And why does the element shrink, despite the fact that the width is set for it? - Artur Han
    • @ArturHan, because you specified the width of only one paragraph and did not specify the possibility of transfer (flex-wrap: wrap). In the second paragraph there is a lot of content, and it expands the second paragraph at the expense of the first. Instead of flex-shrink: 0 you could just set both paragraphs width: 50% - the result would be the same - humster_spb
    • @ArturHan, the default p element is display: block; which has a width: 100%; . - CbIPoK2513

    And if through column-count? I do not actively use it myself, comments / criticisms are welcome.

     <style> .text_block { column-count: 2; } .text_block > p:first-child { margin: 0; } </style> <div class="text_block"> <p>ОписаниС</p><br/> <p>ΠŸΡƒΡ…ΠΎΠ²ΠΈΠΊ ΠΈΠ· качСствСнного ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π°. ΠœΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π» синтСтика,ΠΌΠ΅Ρ…. Π Π°Π·ΠΌΠ΅Ρ€ xl. ДоступСн Ρ‚Π°ΠΊΠΆΠ΅ Π² Π΄Ρ€ΡƒΠ³ΠΈΡ… Ρ€Π°Π·ΠΌΠ΅Ρ€Π°Ρ…</p> </div>