<div class="wrapper sample-block">
<div class="picture">
<img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="M. Lego">
</div>
<div class="message">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia sed quos vel minima deserunt soluta, similique esse laudantium, nostrum veritatis est, sit culpa omnis! Veritatis voluptatibus ipsa soluta amet dolorem.</div>
<div class="picture"><img src="https://randomuser.me/api/portraits/lego/8.jpg" alt="Chef Lego"></div>
<div class="message">Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit soluta dicta iste reiciendis asperiores et, eveniet unde adipisci ipsam consequuntur dolores cupiditate consequatur maiores ex quidem commodi temporibus saepe nam?</div>
</div>
/* Positionnement */
.wrapper {
display: grid;
grid-template-columns: 15% 85%;
grid-gap: 10px;
align-items: center;
}
.picture {
grid-column-start: 1;
}
.message {
grid-column-start: 2;
}
img {
display: block;
width: 100%;
}
/* Styles */
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
body {
background-color: #eee;
font-family: Montserrat, sans-serif;
}
.sample-block {
background-color: #ea005e;
color: #eee;
}
.sample-block .sample-block {
background-color: #c30052;
}
Also see: Tab Triggers