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

KristalkillPlay 0
Viewed 55

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: enter image description here

What I want:enter image description here

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

text-alignment text css html
3 Answers

alternatively, you can use display: flex by adding .player selector

.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 {
    display: flex;
}
<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>

Su'udi Khoirul Anam0

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

.player {
    display: flex;
}
Musyaffa Choirun Man0

You used a different class (probably a typo) for your <p> where it's player_about in the html and player-about in css.

Shafianugraha Hariananda0
Related