JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div class="mainRecordDiv">
<h1 class="clientNameH1">
<strong>Société XY</strong>
</h1>
<img class="clientLogo" src="http://fakeimg.pl/350x200/?text=Client Logo">
<div class="telephone">
<span class="glyphicon glyphicon-earphone"> 418-123-4567</span>
</div>
<div class="adresse">
<span class="glyphicon glyphicon-home"> 123, rue du test, H0H 0H0, Québec, QC</span>
</div>
<p class="presentation">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel ante et mi tincidunt egestas. Aenean auctor tempus justo, et ornare nunc auctor et. Phasellus et rhoncus augue. Pellentesque tempor pulvinar imperdiet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mi augue, gravida sed nibh at, rhoncus auctor neque. Aliquam interdum urna at dapibus scelerisque. Vestibulum condimentum at odio sit amet lobortis. Donec commodo volutpat sem, non fringilla erat bibendum vitae. In ut dui vitae lectus sagittis cursus. Morbi pharetra turpis ut mi commodo cursus.
Phasellus eget turpis quis sem imperdiet iaculis. Vestibulum placerat vestibulum tortor vitae malesuada. Sed nec est nec metus blandit tincidunt. Fusce at augue eu urna lobortis vehicula maximus eget mauris. Nam ornare ac nibh et vestibulum. Vivamus massa metus, finibus vitae mollis quis, vestibulum sit amet nibh. Ut fringilla venenatis orci. Vestibulum dapibus augue tortor, id sollicitudin orci rhoncus sed. Donec sed.
</p>
<div id="map-canvas"></div>
</div>
</body>
CSS
#map-canvas {
width: 50%;
height: 400px;
margin: 40px;
background-color: purple;
}
.clientLogo {
float:right;
}
.mainRecordDiv {
background-color: red;
border-color: black;
border-style: solid;
border-width: 2px;
width: 80%;
margin-left: auto;
margin-right: auto;
}
.clientNameH1 {
background-color: green;
text-align: center;
}
.telephone {
background-color: yellow;
margin-left: 40px;
}
.adresse {
background-color: blue;
margin-left: 40px;
}
.presentation {
width: 50%;
margin: 40px;
overflow: hidden;
background-color: orange;
}