如何将这个div标签添加到框的右侧？

Question

   .left {
            width: 50%;
            display: inline-block;
            float: left;
        }

        /* Second user block */
        .right {
            border-color: lightskyblue;
            background-color: darkcyan;
            width: 50%;
            display: inline-block;
            float: right;
        }

These are the css for the wrappers, not sure why it does not work still.

.boxed {
            border: 2px solid black;
            padding-left: 20px;
            padding-right: 20px;
            padding-bottom: 20px;
            background-color: darkgoldenrod;
            max-width:800px;
            margin:1rem auto;
            overflow:hidden;
        }

        /* Chat blocks */
        .block {
            border: 2px solid darkgreen;
            background-color: lightgreen;
            border-radius: 30px;
            padding: 10px;
            margin: 10px 0;
            border-radius:20px;
            margin-bottom:10px;
            width:60%;
        }

I am making a mock UI and I can't seem to get the blue chat bubbles to the right side, I tried using right: 0px; and float: right; but both don't seem to work. Are there any other css tags I can use position it correctly?

Here are the div tags:

<div class="boxed card my-3">

        <h2 align="center">Chat Log:</h2>

         <div class="block left">
            <img src="User1.jpg" alt="FortniteGamer">
            <p>Hey whats up?. Do you want to get a game going?</p>
            <span class="time-right">11:00</span>
        </div>

        <div class="block right">
            <img src="User2.jpg" alt="CODGamer" class="right">
            <p>Hey! Yeah defintely that sounds fun!</p>
            <span class="time-left">11:01</span>
        </div>

        <div class="block left">
            <img src="User1.jpg" alt="FortniteGamer">
            <p>Sweet! Whats your username on fornite?</p>
            <span class="time-right">11:02</span>
        </div>

        <div class="block right">
            <img src="User2.jpg" alt="CODGamer" class="right">
            <p>My username is: CODSav</p>
            <span class="time-left">11:02</span>
        </div>

        </div> 

Answer 1

It seems that the wrapper ( .card ) is a flex container, in which case floats wont have any effect.

Instead, set the opposite margin to auto:

.right {
    border-color: lightskyblue;
    background-color: darkcyan;
    width: 50%;
    margin-left:auto;
}

Answer 2

Put position:absolute and try:

.right {
            position:absolute;
            border-color: lightskyblue;
            background-color: darkcyan;
            width: 50%;
            display: inline-block;
            float: right;
        }