Horizontally align text from two different divs

user_9095818 0
Viewed 87

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 : JSfiddle image

And this is what I want to achieve : Expected result

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 !

css html javascript
3 Answers

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>

user_177306520

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

https://www.w3schools.com/howto/howto_css_two_columns.asp

user_175059070

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>

user_170071840
Related