How to align text in CSS where both columns are straight?
Introduction: To align text in CSS there are lots of options available. Basically columns are straight always in CSS or in HTML, but here the columns are straight means that the gap between columns and the number of lines in each column should be equal.
Approach: In CSS each column act as a box, so how alignment works and controlled is totally depend on the Box-alignment module, this module aims to create a consistent method of alignment across all of CSS. So by using the Box-alignment modules property we can align the text where two or more than two columns are straight. By using the CSS align-content property
we can control the block axis and by CSS justify-content property to control inline axis. But the mail role is played by the CSS column-gap property, without this property task can not be completed. But by using only this property we can achieve the task.
Below examples illustrate the approach: