Horizontally align text from two different divs

Issue

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 !

Solution

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>

Answered By - George Chond