Horizontally align text from two different divs-CodePudding

I have the following structure of html code :

<link rel="stylesheet" href="test.css" />

<div >
  <div >
    <p >
      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 >Should be aligned</p>
  </div>

  <div >
    <p >Very short text</p>

    <p >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)

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 !

CodePudding user response：

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 >
  <div >
    <p >
      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 >Should be aligned</p>
  </div>

  <div >
    <p >Very short text</p>
    <div>
      <p >Should be aligned</p>
      <p>Some more text here</p>
    </div>
  </div>
</div>

CodePudding user response：

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