How to keep the text align of each other - html

Question

This is the site i'm working on. http://elegantcurtainsandblinds.co.uk/
The text at the top with the icons/images (call us, visit our showroom, Watch our video), I can't seem to keep the text align of each other.
So the text should be within the same line of each other. Everytime I put space in the image/icon moves further to the left.
This is the code -
<div class="topSection">
<div class="logo">
<img src="<?php echo $siteURL;?>/images/eg_logo_new.png" alt="Logo">
</div>
<br>
<p style="float:right;"> Call Us: 01924 724848</p>
<img style="float:right;" src="images/mobile.png"/> <br><br>
<p style="float:right;"> Visit Our Showroom</p>
<img style="float:right;" src="images/images.png" height="30px" width="30px;"/><br><br>
<p style="float:right;"> Watch Our Video</p>
<img style="float:right;" src="images/video.png" height="30px" width="30px;"/>
<div class="clear"></div>
</div>

Answer 1

Use display: flex for modern browsers, it's mush easier to work with. Here is a possible solution for your problem (click on Run code snippet to see the result):
.topSection {
display: flex;
justify-content: space-between;
}
.info-container {
display: flex;
flex-direction: column;
}
.info {
display: flex;
align-items: center;
}
.info img {
margin-right: 8px;
}
<div class="topSection">
<div class="logo">
<img src="http://www.elegantcurtainsandblinds.co.uk/images/eg_logo_new.png" alt="Logo">
</div>
<div class="info-container">
<div class="info">
<img src="http://elegantcurtainsandblinds.co.uk/images/mobile.png" height="30px" width="30px;" />
<p>Call Us: 01924 724848</p>
</div>
<div class="info">
<img src="http://elegantcurtainsandblinds.co.uk/images/images.png" height="30px" width="30px;">
<p>Visit Our Showroom</p>
</div>
<div class="info">
<img src="http://elegantcurtainsandblinds.co.uk/images/video.png" height="30px" width="30px;">
<p>Watch Our Video</p>
</div>
</div>
</div>
More info on flexbox