Horizontally align two divs inside a parent holder div? - html

Question

I'm sorry if I'm not using the correct terminology, I'm new to this. I want to stack two divs side by side horizontally, the image and the message content. I have coded a messaging UI.
It all worked fine until I wanted to ad the users image next to the message. I have tried adding display: inline-block; to both divs (the image and message content) but that didn't help.
I'm not sure what else I can do, unless I just use bootstraps grid system, which seems overkill.
https://codepen.io/anon/pen/pxZygr

Answer 1

clear:both; prevents elements from floating next to one another. Your style rule .message-holder .message-to { clear: both; } is affecting the elements you want to display inline. Here's a helpful readup I found on floats and clear: both.

Answer 2

One way I can think of this working would be to have each value implemented as a table element. Something like...
<table>
<td>
<div class="message-image pull-right">
<img src="http://placehold.it/40x40">
</div>
</td>
<td>
<div class="message-content message-to">
Hey man, how was your day after?
</div>
</td>
</table>

Answer 3

Wherever you have class message-holder, add class d-flex
html,
body {
height: 100%;
}
.messages-wrapper {
padding: 20px 20px 0px 20px;
height: 100vh;
}
.pull-right {
float: right !important;
}
.message-holder .message-to {
float: right;
clear: both;
}
.message-content {
max-width: 300px;
padding: 12px 15px 12px 15px;
border-radius: 3px;
margin-bottom: 10px;
}
.message-image {
clear: both;
}
.message-image img {
width: 40px;
border-radius: 100%;
}
.message-picture img {
width: 20px;
height: 20px;
}
.message-to {
background-color: #161616;
color: #fff;
float: right;
}
.message-from {
background-color: #ebebeb;
float: left;
}
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" type="text/css">
<div class="messages-wrapper">
<div class="message-holder d-flex">
<div class="message-image pull-right">
<img src="http://placehold.it/40x40">
</div>
<div class="message-content message-to">
Hey man, how was your day after?
</div>
</div>
<div class="message-holder d-flex">
<div class="message-image pull-right">
<img src="http://placehold.it/40x40">
</div>
<div class="message-content message-to">
Can you also bring your charger when you come round?
</div>
</div>
<div class="message-holder d-flex">
<div class="message-image">
<img src="http://placehold.it/40x40">
</div>
<div class="message-content message-from">
It was alright, I'll tell you all about it later! No problem, I'm on my way now.
</div>
</div>
<div class="message-holder d-flex">
<div class="message-image">
<img src="http://placehold.it/40x40">
</div>
<div class="message-content message-from">
ffff
</div>
</div>
<div class="message-holder d-flex">
<div class="message-image pull-right">
<img src="http://placehold.it/40x40">
</div>
<div class="message-content message-to">
Hey man, how was your day after?
</div>
</div>
</div>