html - CSS - How would I align these 'li's to the right?

Question

https://i.stack.imgur.com/I3FWb.png

I've a problem with the message bubbles in my app, They won't align to the right, I've tried messing with displays, margins, floats, you name it. I've decided to leave it up to the professionals.

Right now my hierarchy looks something like this:

.Message {
  width: fit-content;
  height: auto;
  margin-left: 10px;
}

.Message>h5 {
  font-size: 12pt;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  opacity: 0.3;
  margin-bottom: 0px;
}

.Message>ul {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.Message>ul>li {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 12pt;
  width: fit-content;
  margin-top: 5px;
  background-color: rgb(45, 45, 45);
  padding: 6px;
  border-radius: 8px;
}

.Message>br {
  margin: 0px;
}

#MSGOUT {
  text-align: left;
  float: left;
}

#MSGIN {
  float: right;
  margin-right: 5px;
  text-align: right;
}

<div class="Message" id="MSGIN">
  <h5>UserName</h5>
  <ul>
    <li>Message1</li>
    <li>Message2</li>
  </ul>
</div>

Answer 1

easiest way to do this is with flexbox

.Message{
display:flex;
flex-direction:column;
align-items:flex-end;
}

ul{
list-style-type:none;}

h5{
margin:0}

<div class="Message" id="MSGIN">
  <h5>UserName</h5>
  <ul>
    <li>Message1</li>
    <li>Message2</li>
  </ul>
</div>