Multi row alignment and paragraph background

Question

I'm having trouble mixing two requirements for rendering text.

I need to be able to allow 2 differents way of alignment. The first one is a classic alignment: left, center and right in a region. The second is the alignment of the text afterwards. It could be for example aligned at the left in the region but then right in the text, or text aligned center, then text aligned right in the text (see pictures above).

Example 1: Example 2:

Here is my current implementation: https://jsfiddle.net/2vsxfzLd/4/

<div class="container" id="container">
    <p id="captionRegion" class="captionRegion" style="width: 90%; height: 20%; left: 5%; top: 50%; padding: 0%; -webkit-writing-mode: horizontal-tb; text-align: center; background-color: blue;">
        <span class="outerSpan" style="line-height: 18vh; text-align: end; display: inline-block; width: initial;">
            <span class="innerSpan" style="font-size: 24px; line-height: 30px; color: rgb(255, 255, 255); font-style: normal; font-weight: normal; text-decoration: none; font-family: Arial; padding-left: 12.8px; padding-right: 12.8px; vertical-align: middle; width: 100%; background-color: rgb(100, 100, 100);">
                This is center textAlign <br> 
                text aligned "end" inside the box.
            </span>
        </span>
    </p>
</div>

With following CSS:

.container{
    width:160vh; /* 16:9 */
    height:90vh; /* 16:9 */
    position: absolute;
    display: block;
    overflow: hidden;
    margin: 0;
}

.captionRegion{
    position: absolute;
    z-index: 2147483647;
    margin: 0;
    }

.innerSpan{
    display: inline-block;
    line-height: initial;
}

The problem is that I would like my gray text background color to take up 100% width.

(innerSpan - display: inline-block).

This is only working by putting outerSpan in display mode inline-block, which cancel the multi alignment.

Any idea?

Answer 1

So I did it this way: https://jsfiddle.net/2vsxfzLd/9/

Thanks to the flex boxes.

<div class="container" id="container">
    <div id="captionRegion" class="captionRegion">
        <div class="outerParagraph">
            <div class="innerSpan">
                <span style="background-color: yellow; color: red; padding-left: 12px; line-height: initial;">
                This is center textAlign
                <br/>text aligned "end" inside the box.
                </span>
            </div>
        </div>
    </div>
</div>