Vertical align two columns, a shorter and a longer text

Question

here is a simplified fiddle of what I'm working on:

HTML:

<div id="container">
    <div id="DivB">Just another text.</div>
    <div id="DivA">Lots and lots of text. Lots and lots of text.Lots and lots of text. Lots and lots of text. Lots and lots of text. Lots and lots of text. Lots and lots of text. Lots and lots of text. Lots and lots of text.</div>
</div>

CSS:

#container {
    overflow: hidden;
}
#DivA {
    overflow: hidden;
    background: #ccc;
}
#DivB {
    float: right;
    background: #000;
    color: #FFF;
}

I've tried in many ways to vertical align the shorter text with the longer one keeping everything responsive but I can't seem to find a valid solution.

All the similar questions I found use something not dynamic, let's say a fixed width, height, margin or anything else, and these solutions won't work for my problem. Thanks!

Edit: Sorry, I forgot to write that the shorter line still needs to keep its size like in the example I posted, the longer text needs to shrink besides it while it stays still

http://stackoverflow.com/a/33815389/3597276 – Michael Benjamin Jan 09 '17 at 03:21 — Michael Benjamin, Jan 09 '17 at 03:21

score 2 · Accepted Answer · answered Jan 09 '17 at 03:27

2

On top of flexbox, you can use display: table; and vertical-align http://jsfiddle.net/xxab2345/2/

Or even display: inline; or display: inline-block; and vertical-align http://jsfiddle.net/xxab2345/3/

answered Jan 09 '17 at 03:27

Michael Coker

52,626
5
64
64

The first solution is almost working, I have to keep the shortest line of text on one line though, but I forgot to say it before. Well, it just needs to keep its dimension, and the other text continue to shrtink. I missed this important information because my fiddle already did that, sorry. – Andrea Jan 09 '17 at 03:42
add `white-space:nowrap;` to the element where you don't want the words to break. http://jsfiddle.net/xxab2345/5/ – Michael Coker Jan 09 '17 at 03:46

Obsidian Age · Answer 2 · 2017-01-09T03:54:07.383

0

The magic you are looking for is display: flex :)

Apply it to both divs, and they will have equal heights. An updated fiddle can be found here.

Note that if you want to change the order of your DIVs, you will have to swap their position in the HTML, as float won't work with display:flex :)

Update Based On Question Revision:

To have the shorter div display all the text on the same line, all you need to do is add white-space: nowrap; to it.

An updated fiddle showcasing this new behaviour can be found here.

Hope this helps!

edited Jan 09 '17 at 03:54

answered Jan 09 '17 at 03:23

Obsidian Age

41,205
10
48
71

Sorry, but I missed something initally in my question, I have to keep the shortest line of text on one line. Well, it just needs to keep its dimension, and the other text continue to shrink. I missed this important information because my fiddle already did that, sorry. – Andrea Jan 09 '17 at 03:45
I've updated my answer to address this issue -- hopefully this is the behaviour you're looking for :) – Obsidian Age Jan 09 '17 at 03:54

score 0 · Answer 3 · answered Jan 09 '17 at 06:57

0

Any easier way would be to use float:left;

.container>div{float:left;}

DEMO

answered Jan 09 '17 at 06:57

Ikhlak S.

8,578
10
57
77

Vertical align two columns, a shorter and a longer text

3 Answers3