How to display text to the right of a div inside another div?

Question

I'm having a problem with the set text to the right of a div It is always at the bottom, not on the right. Here is my code

.player-container {
    position: relative;
    text-align: right;
    line-break: auto;
    display: inline-block;
    left: 0;
}

.player-container h1 {
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    text-align: center;
    width: 60%;
}

.player-container .model {
    padding-top: 3rem;
    width: 700px;
    height: 450px;
}

.player-about {
    display: inline-block;
    position: absolute;
    right: 0;
}

<div class="page-content">
        <div class="player" label="END">
            <div class="player-container">
                <h1 class="username">END</h1>
                <model-viewer class="model" src="assets/scene.gltf" alt="VR Headset" auto-rotate camera-controls ar
                    ios-src="assets/scene.gltf">
                </model-viewer>
            </div>
            <p class="player_about"> text
            </p>
        </div>
    </div>

My result:

What I want:

How to display text to the right of a div inside another div? Is there any solution that will work for me?

Answer 1

One solution is to turn .player into a flex container:

.player {
    display: flex;
}