In a 'div' element, how to align text to the left while aligning all other items to the right?

Question

It's like a post where the title appears on the left and the dropdown settings menu's arrow on the right.. This is what I have till now

<style>
    .thread {
        background-color: skyblue;
        height: 50px;
        width: 90%;
        align-self: center;
        text-align: end;
        display: inline-block;
        border-radius: 6px;
        position: relative;
    }

    .header {
        width: fit-content;
        display: inline-block;
        align-self: right;
    }

    .arrow {
        display: inline-block;
        vertical-align: bottom;
        height: 50%;
    }

    .titletext {
        display: inline-block;
        text-align: left;
    }
</style>
<div class="thread">
    <p class="titletext">Title</p>
    <div class="header"><img class="arrow" onclick="showPopover(this)" src="https://image.flaticon.com/icons/png/512/7/7584.png" /></div>
</div>

It appears like this

And I'm trying to achieve this

Sorry if the code is too random or if some lines are unneeded but I've been searching and trying many stuff so that's what I have right now.

Answer 1

You can use float:right on the arrow, and text-align:left on the entire header.

 .thread { background-color: skyblue; height: 50px; width: 90%; text-align: left; display: inline-block; border-radius: 6px; position: relative; } .header { display: inline-block; float: right; } .arrow { display: inline-block; vertical-align: bottom; width: 25px; height: auto; float: right; margin: 12px; } .titletext { display: inline-block; text-align: left; } 

 <div class="thread"> <p class="titletext">Title</p> <img class="arrow" onclick="showPopover(this)" src="https://image.flaticon.com/icons/png/512/7/7584.png" /> </div> 

Answer 2

.titletext {
    display: inline-block;
    float: left;
}

Answer 3

just use float:left;

  .thread { background-color: skyblue; height: 50px; width: 90%; align-self: center; text-align: end; display: inline-block; border-radius: 6px; position: relative; } .header { width: fit-content; display: inline-block; align-self: right; padding:15px 10px; } .arrow { display: inline-block; vertical-align: bottom; height: 50%; } .titletext { display: inline-block; text-align: left; float:left; padding-left:10px; } 

 <div class="thread"> <p class="titletext">Title</p> <div class="header"><img class="arrow" width="20" onclick="showPopover(this)" src="https://image.flaticon.com/icons/png/512/7/7584.png" /></div> </div> 

Answer 4

Just put you´r class="titletext" like:

.titletext {
    position: absolute;
    top;
    left: 0;
}

Answer 5

You can use float:left on the titletext

<style>
    .thread {
        background-color: skyblue;
        height: 50px;
        width: 90%;
        align-self: center;
        text-align: end;
        display: inline-block;
        border-radius: 6px;
        position: relative;
    }

    .header {
        width: fit-content;
        display: inline-block;
        align-self: right;
    }

    .arrow {
        display: inline-block;
        vertical-align: bottom;
        height: 50%;
    }

    .titletext {
        display: inline-block;
        float:left;
    }
</style>
<div class="thread">
    <p class="titletext">Title</p>
    <div class="header"><img class="arrow" onclick="showPopover(this)" src="https://image.flaticon.com/icons/png/512/7/7584.png" /></div>
</div>