Good day, I can not understand how to make the same indentation.
There are several columns, each column has 1 or 2 words of different lengths. The second word is always transferred to the next line, between these columns should be the same distance, if done through max-width , that is, an empty small space at the end of the first word. Perhaps this is elementary, but so far I have found only one solution, to enclose each word in a separate tag.
- 1) My solution
- 2/3) Problem
.directions-tabs-menu { display: flex; } .directions-tabs-menu__item { max-width: 150px } .directions-tabs-menu__item:not(:last-child) { margin-right: 60px; } .directions-tabs-menu__text { letter-spacing: 0.52px; text-transform: uppercase; font-size: 13px; } .directions-tabs-menu__order { opacity: 0.5; font-size: 14px; font-family: "Open Sans", sans-serif; font-weight: 300; } <div class="directions-tabs "> <div class="directions-tabs-menu "> <a class="directions-tabs-menu__item " href="#"> <div class="directions-tabs-menu__order">02</div> <div class="directions-tabs-menu__text">Π£ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅</div> <div class="directions-tabs-menu__text">Π°ΠΊΡΠΈΠ²Π°ΠΌΠΈ</div> </a> <a class="directions-tabs-menu__item " href="#"> <div class="directions-tabs-menu__order">02</div> <div class="directions-tabs-menu__text">Π£ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Π°ΠΊΡΠΈΠ²Π°ΠΌΠΈ</div> </a> <a class="directions-tabs-menu__item" href="#"> <div class="directions-tabs-menu__order">02</div> <div class="directions-tabs-menu__text">Π‘ΡΡΡΠΊΡΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ΄Π΅Π»ΠΎΠΊ</div> </a> </div> Π²Π²Π΅Π΄ΠΈΡΠ΅ ΡΡΠ΄Π° ΠΊΠΎΠ΄ 
