Hello! I don’t know how to formulate a question correctly, so I’ll use a picture and a text explanation. Here is an example of the necessary implementation of the problem. Lines added for clarity.

Here's how

There is a table cell that contains the content as in the picture. value, value-two and value-value have the same font size, for example 12px; hey is the largest bold font, for example 20px, and World and Hello are bold font 16px, respectively. And that's exactly what is not clear in the writing of html and css:

  1. I can not figure out how to do without adding a regular table to two columns so that the values ​​on the left and right begin with a certain value, let's say from the widest left value on any of the rows there was an indent of 20px and the values ​​on the right all started from the same same place (vertical line in the picture).
  2. Regardless of the font size, the text on each line should be pressed to the bottom of the line (horizontal line). Tried to do through the division of the left and right side into 2 columns in the table, but it is impossible to make so that each row starts with the same value.

I hope, someone understood my terrible explanations and will be able to help me with the emerging problem of kindergarten level. Thanks for attention!

  • Add code to the question - br3t

1 answer 1

For bottom alignment, you can use the vertical-align: bottom; property for td elements vertical-align: bottom; . For the same cell size, you can use the minimum width (as a percentage of the parent) min-width: значение; .

Can you provide an HTML layout for accurate explanation?

JSFiddle example

 table { width: 100%; } table td { vertical-align: bottom; } table td div { overflow: hidden; } table td p { display: flex; width: 100%; margin: 0 auto; border-bottom: 1px solid #000; clear: both; align-items: flex-end; overflow: hidden; } table td span { display: block; float: left; margin: 0 0 -2px 0; padding: 5px 0 0; letter-spacing: 1px; } table td .first-column { min-width: 45%; font-size: 12px; line-height: 14px; vertical-align: bottom; } table td .second-column { min-width: 45%; font-weight: bold; border-left: 1px solid #000; } table td .second-column.big-font { color: red; font-size: 20px; } table td .second-column.medium-font { margin: 0 0 -4px 0; font-size: 16px; } 
 <table> <td> <div> <p> <span class="first-column">value:</span> <span class="second-column big-font">Hey</span> </p> <p> <span class="first-column">value-two:</span> <span class="second-column medium-font">World</span> </p> <p> <span class="first-column">value-value:</span> <span class="second-column medium-font">Hello</span> </p> </div> </td> </table> 

  • Yes. here is the html column, css has not done yet <td> <div> <p> value 1 <span> HI </ span> </ p> <p> value 2 <span> HELLO </ span> </ p> <p > value 3 <span> WORLD </ span> </ p> </ div> </ td> Most likely wrong and needs to be redone, but I don’t understand how - Merkelst
  • Here's a link to the fiddle , maybe this will do - Yuriy Chaban
  • I was glad to help =) - Yuriy Chaban