How can I align the divs to right?

Question

this is image of my chat app. I want to position divs to the right but I cant do this. I tried the text align right but that did not work. When text length is long, divs should be fixed on the right. Text can expand to the left. This divs should works like text align center attribute. This is my html code

<div class="container"> 
<div id="chat-cont"> </div> 

<div class="row"><h5>Connection ID : <span id="connectionId"></span></h5></div>
<div class="row"> <div class="col-md-7">
<input type="text" id="sender" value="@ViewBag.message"></div> </div>
<div class="row"> <div class="col-md-7"><input type="text" placeholder="ReceiverId" id="client"></div>
</div> 
<div class="row"> <div class="col-md-7"> <input type="text" id="txtMessage"> 

<button>Send</button></div> </div> </div> 

This is my js code

$("button").click(() => { 
let message = $("#txtMessage").val();
var user = $("#sender").val(); 

connection.invoke("ClientSendMessage", $("#client").val(),user, message) .catch(error => console.log("Error." + error));
var div = document.createElement("div"); 
div.textContent = message; 
div.style.fontSize = "20px"; 
div.style.fontFamily = "Josefin Sans, sans-serif";
div.style.paddingLeft = "5px"; 

div.style.paddingRight = "5px"; 

div.style.paddingBottom = "3px"; 
div.style.paddingTop = "3px"; 
div.style.marginLeft = "500px"; 
div.style.marginBottom = "2px"; 
div.style.width = "fit-content"; 
div.style.height = "fit-content"; 
div.style.backgroundColor = "#056162";
div.style.color = "white"; 
div.style.borderRadius = "10px"; 
div.style.border = "1px solid black";
document.getElementById("chat-cont").appendChild(div); }); 

And this is how to codes work [Divs should be in same position as rigt][1]

[1]: https://i.stack.imgur.com/nuPWy.png

Answer 1

use flexbox align items flex-end

 .box { display: flex; flex-direction: column; align-items: flex-end; }.child{ background-color: #f44336; color: white; padding: 14px 25px; margin: 10px; text-align: center; text-decoration: none; display: inline-block; }

 <div class="box"> <div class="child">Hello</div> <div class="child">How are you?</div> <div class="child">What is your favorite lesson?</div> </div>

Answer 2

 .box { display: flex; border: solid 1px blue; justify-content: flex-end; }.child { background-color: #f44336; color: white; padding: 24px 25px; margin: 1vw; display: inline-block; border-radius: 50%; text-decoration: none; }.spacer { display: flex; flex-direction: column }

 <div class="box"> <div class='spacer'> <div> <div class="child">Hello</div> </div> <div> <div class="child">How are you?</div> </div> <div> <div class="child">What is your favorite<br> lesson?</div> </div> </div> </div>