https://i.sstatic.net/ezRuE.png
.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 styles define the wrappers, but there seems to be an issue with getting the blue chat bubbles on the right side. The right: 0px; and float: right; methods were attempted, without success. Are there any alternative CSS properties that could help position it correctly?
Below 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, what's up? Do you want to start a game?</p>
<span class="time-right">11:00</span>
</div>
<div class="block right">
<img src="User2.jpg" alt="CODGamer" class="right">
<p>Hey! Yeah, that sounds like fun!</p>
<span class="time-left">11:01</span>
</div>
<div class="block left">
<img src="User1.jpg" alt="FortniteGamer">
<p>Awesome! What's your Fortnite username?</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>