Center to divs side-by-side same size

[thomas2411]

Hello,
could anyone help me with a problem like this:
I have a container with max width 1140 (bootstrap 4). Inside in one row I want to put two divs side by side with a content. I would like to have those two divs same width. So if the content of the first/last one is longer than the other one, the other one should stretch so that both of them has same size. Then this should be center.
How to achieve this?

[Beverleyh]

The grid should total 12, so I think you’re looking for .col-md-6 (assuming you mean for desktop and up).

For more info, check the documentation http://getbootstrap.com/css/ and http://getbootstrap.com/examples/grid/

[thomas2411]

But the text put there will be different size based on page it is shown on. There is no problem with fixed width. But I need this to bu automated. Sometimes there will be two words on both left and right divs, some times left will have 8 words while right will have on…so both of them should have the same width, automatically adjusted ( I will use there border and I want to have both divs same size) See screen: https://snag.gy/9YdB0M.jpg

[Beverleyh]

I see – so this isn’t a 2 column grid for layout/structure, but a ‘halved pill’ content component. I imagine you could do that with Bootstrap but there might be excess markup.

You might want to look at building it with flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

You could also try table-layout https://css-tricks.com/almanac/properties/t/table-layout/

If you need specific help, please provide your code in a basic CodePen demo and we can offer further suggestions.

[Paulie_D]

You can force the ‘cells’ to be the same width but Flexbox has issues with text wrapping and overflow unless the width is known.

So I’d be using an inline-table. Much easier;

http://codepen.io/Paulie-D/pen/qrdmXO

[thomas2411]

Thank you very much @Paulie_D, works like a charm :)

[Author]

Posts