0
166
ViewsHorizontally align text from two different divs
I have the following structure of html code :
<link rel="stylesheet" href="test.css" />
<div class="row">
<div class="container">
<p class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.
</p>
<p class="align">Should be aligned</p>
</div>
<div class="container">
<p class="content">Very short text</p>
<p class="align">Should be aligned</p>
<p>Some more text here</p>
</div>
</div>
Here is my css :
.container {
display: flex;
flex-direction: column;
width: 40%;
margin-right: 20px;
}
.row {
display: flex;
flex-direction: row;
}
I am trying to find a way to horizontally align the two element with the align class but I can not figure it out. I have to precise that the content of the element with "content" class could be anything so I need a solution that works in every case.
(If you have a solution using some Js code it is ok)
Here is a Jsfiddle demo.
Actual result is this : 
And this is what I want to achieve : 
The text should go where the arrow point to be aligned with the left text, and the "Some more text" should be after the aligned text I hope it's clear now
Thank you very much for your time !
3 answers
Answer question0
It's looking great except that you need to remove the flex-direction for the .container div and add this instead
.row {
flex-flow: row nowrap;
}
For the two children divs
.container{
display: flex;
flex-direction: column;
justify-content: center;
}
Since Flexbox isn't supported by IE 10 and below, you should consider checking this demo👇
0
Please try this:
.row {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-row: auto auto auto;
grid-gap: 20px;
}
.item2{
grid-row: 2 / 3;
}
.item5{
grid-row: 3 / 4;
grid-column: 2 / 3;
}<div class="row">
<div class="item1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="item2">Should be aligned</div>
<div class="item3">Very short text</div>
<div class="item4">Should be aligned</div>
<div class="item5">Some more text here</div>
</div>0
You can't do that with that HTML structure. You need to wrap the two <p> in a <div>.
Then use a display:grid; and grid-template-row:2fr 1fr; in .container to define that the first divs consume about x2 the space from the second divs and get aligned properly.
.row {
display: flex;
flex-direction: row;
}
.container {
display: grid;
grid-template-rows: 2fr 1fr;
width: 40%;
margin-right: 20px;
}<div class="row">
<div class="container">
<p class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p class="align">Should be aligned</p>
</div>
<div class="container">
<p class="content">Very short text</p>
<div>
<p class="align">Should be aligned</p>
<p>Some more text here</p>
</div>
</div>
</div>