Chat message style - css

Question

I am Having a lof of problems trying to create a message card for my app. Basically I want to the content of the message div to be align with the name of the person,like this app .I already Tried to change the display to flex wrap,but still not the same, And I am looking if it's possible to re-create what this person did on the image here
Right now mine is this:
::-webkit-scrollbar {
width: 3px;
height: 3px;
}
::-webkit-scrollbar-button {
width: 0px;
height: 0px;
}
::-webkit-scrollbar-thumb {
background: #fc0303;
border: 100px none #ffffff;
border-radius: 7px;
}
::-webkit-scrollbar-thumb:hover {
background: #fc0303;
}
::-webkit-scrollbar-thumb:active {
background: #000000;
}
::-webkit-scrollbar-track {
background: #191919;
border: 100px none #ffffff;
border-radius: 100px;
}
::-webkit-scrollbar-track:hover {
background: #191919;
}
::-webkit-scrollbar-track:active {
background: #333333;
}
::-webkit-scrollbar-corner {
background: transparent;
}
#menu_icon {
width:40px;
height:40px;
border-radius:50%;
transition: transform .9s;
float:right
}
#menu_icon:hover {
cursor:pointer;
-ms-transform: scale(1.1); /* IE 9 */
-webkit-transform: scale(1.1); /* Safari 3-8 */
transform: scale(1.1);
}
.chat_box{
background-color:#191919;
overflow: scroll;
overflow-x: hidden;
border: 2px black dashed;
width:100%;
height:100%;
border-radius:3px;
padding:10px;
}
.chat_box_message_content{
display:block;
}
.msg-txt {
display: flex;
flex-flow: wrap column;
width: 80%;
}
.chat_box_message_content p{
color:white;
}
.chat_box_message_content img {
width:35px;
height:35px;
border-radius:50%;
}
body {
background: #eef0f1;
color: black;
font-family: "Roboto", sans-serif;
overflow-x: hidden;
}
<div id="chat_box" class="chat_box">
<img onclick="showMenu()" id="menu_icon" src="https://i.pinimg.com/736x/3f/e0/dc/3fe0dcb84367af59e8881edcb7747d58.jpg">
<p style="color:white;font-size:13px;font-style: oblique;margin-top:50px">Usuário Conectado ao servidor!</p>
<div class="chat_box_message_content">
<img src="https://i.pinimg.com/736x/3f/e0/dc/3fe0dcb84367af59e8881edcb7747d58.jpg">
<span style="color:#9b72da" class="chat_box_message_content_icon">o</span>
<p class="chat_box_message_content_msg">
AAAAAAAAA
</p>
</div>
<div class="chat_box_message_content">
<img src="https://i.pinimg.com/736x/3f/e0/dc/3fe0dcb84367af59e8881edcb7747d58.jpg">
<span style="color:#da729f" class="chat_box_message_content_icon">Maria</span>
<p class="chat_box_message_content_msg">
teste
</p>
</div>
</div>
Can U guys help me with it?

Answer 1

Add display: inline to your ".chat_box_message_content p" CSS class to be like this:
.chat_box_message_content p {
color:white;
display: inline;
}

Answer 2

You can try to make the card div have display: grid and then set the content's positions inside the grid. Something like that:
::-webkit-scrollbar {
width: 3px;
height: 3px;
}
::-webkit-scrollbar-button {
width: 0px;
height: 0px;
}
::-webkit-scrollbar-thumb {
background: #fc0303;
border: 100px none #ffffff;
border-radius: 7px;
}
::-webkit-scrollbar-thumb:hover {
background: #fc0303;
}
::-webkit-scrollbar-thumb:active {
background: #000000;
}
::-webkit-scrollbar-track {
background: #191919;
border: 100px none #ffffff;
border-radius: 100px;
}
::-webkit-scrollbar-track:hover {
background: #191919;
}
::-webkit-scrollbar-track:active {
background: #333333;
}
::-webkit-scrollbar-corner {
background: transparent;
}
#menu_icon {
width: 40px;
height: 40px;
border-radius: 50%;
transition: transform .9s;
float: right
}
#menu_icon:hover {
cursor: pointer;
-ms-transform: scale(1.1);
/* IE 9 */
-webkit-transform: scale(1.1);
/* Safari 3-8 */
transform: scale(1.1);
}
.chat_box {
background-color: #191919;
overflow: scroll;
overflow-x: hidden;
border: 2px black dashed;
width: 100%;
height: 100%;
border-radius: 3px;
padding: 10px;
}
.chat_box_message_content {
display: grid;
grid-template-columns: 50px 5fr;
grid-template-rows: 20px 30px;
margin: 2em 0;
grid-column-gap: 15px;
}
.msg-txt {
display: flex;
flex-flow: wrap column;
width: 80%;
}
.chat_box_message_content span {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 1;
}
.chat_box_message_content p {
color: white;
grid-column-start: 2;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
padding: 5px 0;
}
.chat_box_message_content img {
width: 100%;
max-width: 45px;
height: auto;
border-radius: 50%;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
body {
background: #eef0f1;
color: black;
font-family: "Roboto", sans-serif;
overflow-x: hidden;
}