How to align name and messagess - html

Question

So I'm trying to align badge , username and message for streamlabs chat.
currently have made this : https://i.imgur.com/fydIZgn.png ,
but want it to look like this : https://i.imgur.com/QFw8YeA.png
so here is html and css not sure what im missing here but hope someone can help me with this
also if somebody does not have badges want his name to start from left without gaps which currently works with this setup.
<!-- chat item -->
<script type="text/template" id="chatlist_item">
<div data-from="{from}" data-id="{messageId}">
<span class="meta" style="color: {color}">
<span class="badges"></span>
<span class="name">{from}</span>
<span class="message">{message}</span>
</span>
</div>
</script>
#import url(https://fonts.googleapis.com/css?family=Roboto:700);
* {
box-sizing: border-box;
}
html, body {
height: 100%;
overflow: hidden;
}
body {
text-shadow: 0 0 1px #000, 0 0 2px #000;
background: {background_color};
font-family: 'Roboto';
font-weight: 700;
font-size: {font_size};
line-height: 1.5em;
color: {text_color};
}
#log>div {
animation: fadeInRight .3s ease forwards, fadeOut 0.5s ease {message_hide_delay} forwards;
-webkit-animation: fadeInRight .3s ease forwards, fadeOut 0.5s ease {message_hide_delay} forwards;
}
.colon {
display: none;
}
#log {
display: table;
position: absolute;
bottom: 0;
left: 0;
padding: 0 10px 10px;
width: 100%;
table-layout: fixed;
}
#log>div {
display: table-row;
}
#log>div.deleted {
visibility: hidden;
}
#log .emote {
background-repeat: no-repeat;
background-position: center;
background-size: contain;
padding: 0.4em 0.2em;
position: relative;
}
#log .emote img {
display: inline-block;
height: 1em;
opacity: 0;
}
#log .message,#log .meta {
vertical-align: top;
display: table-cell;
padding-bottom: 0.1em;
margin-left: 0.2em;
}
#log .meta {
width: 35%;
text-align: left;
padding-right: 0.5em;
white-space: nowrap;
text-overflow: clip;
overflow: hidden;
}
#log .message {
word-wrap: break-word;
white-space: initial;
width: 65%;
display: inline-block;
color: #fff;
}
.badge {
display: inline-block;
margin-right: 0.2em;
position: relative;
height: 1em;
vertical-align: middle;
top: -0.1em;
}
.name {
margin-left: 0.2em;
}

Answer 1

Removing display : inline-block should do the trick . Inline-block create block elements without line breakers . In this case badges , name and messages are separate block elements positioned next to each other . Each element will still have its own boundaries and properties like margin can be applied to each of them .
Since your requirement is to display them as inline , either change inline-block to 'inline' or remove the inline-block as span in already an inline element