Issue with text with gradient overlay and text line paragraphs tied to the same container div without a wrapper div

[acsr]

The construction of the text overlay DOM makes it almost impossible to change the text alignment of both lines to the bottom of the image by CSS only.

Gradient overlay and text line paragraphs tied to the same container div without a wrapper div share also the 50% width limitation used to style the extension of the gradient and limit the text at the same time.

With the below solution the issue is using position: absolute; on the div you get always the p elements inline.

I tried:

.block.banner .text {
  display: flex
  p {
    align-self: flex-end;
  }
}

or

.block.banner .text {
  display: flex
  align-self: flex-end;
}

I would suggest to put the gradient on a wrapper div positioned absolute and wrap the lines / p in a seperate div decoupled from the order inside the gradient div itself.

Given the impact of the width on the gradient, even another construction is maybe better.

For example a light diagonal gradient is a variant that makes sense:

background: linear-gradient(15deg, #000, transparent 40%);

You can use the percent value on transparent to control where the full transparency starts!

[acsr]

this works to align the two lines stacked at the bottom:

<div class="banner-wrapper">
  <div class="banner-text">
    <p>Zeile 1</p>
    <p>Zeile 2</p>
  </div>
</div>

.block.banner-wrapper .text {
  display: flex
  .banner-text {
    align-self: flex-end;
  }
}

Screenshot of the result

with diagonal gradient:

background: linear-gradient(15deg, rgba(0,0,0,0.5), transparent 40%);

You can use RGBa black with alpha value to even reduce the shadow down to e.g 50% opacity in this example. The 40% is the position of the next color value in the gradients spektrum.