Aligning inline-block elements containing text

[nathanbfox]

Hi,

I have created some text boxes displayed inline-block. The boxes are lined up next to each other. The boxes each contain different amounts of text. Could you tell me how I can stop the height of the box responding to the text so that the boxes are all the same size when they have a border? And also, how to ensure the box size is responsive?

[jsdisco]

You can use either flex or grid. Flex is usually simpler, so here’s some example:

<div class="container">
  <div class="text">Text</div>
  <div class="text">Text</div>
  <div class="text">Text</div>
</div>

.container {
  display:flex;
}

Note that this only works if you don’t set the align-items property for the flex-container, because it defaults to stretch - which means, each text box will be as high as the highest one.

Responsiveness can then easily be added. If you want the boxes to stack on top of each other for small viewports, you’ll only have to set the flex-direction to column. But without seeing any code, I’m just guessing what you’re trying to achieve.

[nathanbfox]

Thanks for this. Flex worked well . It’s for my first project and i’m sure it could be a lot more refined, but i’m happy with it nonetheless