image and multiple line of text and links vertical alignment - html

Question

I have an image and some text in p tag and link to be aligned vertically. it works nicely when I float the image. but when I use padding left in the p tag and the link, it doesn't get the padding perfectly.
click here to see the image I need look like
here is a fiddle
.wrapper {
font-family: sans-serif;
width: 400px;
margin-top: 30px;
margin-bottom: 30px;
clear:both
}
img {
float: left;
}
p.text {
padding-left: 30px;
display: block;
padding-bottom: 22px;
color: #222222;
}
a.link {
text-decoration: none;
padding-left: 30px;
text-transform: uppercase;
line-height: 22px;
color: #777777;
}
a.date {
color: #e10622;
text-decoration: none;
}
<div class="wrapper">
<img src="https://placehold.it/100x100" alt="">
<p class="text">Posted By: Simon | 26 July 2016</p>
<a href="#" class="link">Days are all happiness is key
and Free</a>
</div>
<div class="wrapper">
<img src="https://placehold.it/100x100" alt="">
<p class="text">Posted By: Simon | 26 July 2016</p>
<a href="#" class="link">Days are all happiness is key
and Free</a>
</div>
<div class="wrapper">
<img src="https://placehold.it/100x100" alt="">
<p class="text">Posted By: Simon | 26 July 2016</p>
<a href="#" class="link">Days are all happiness is key
and Free</a>
</div>
<br>
<br>
<br>
Please see here what I need
thanks in advance. :)

Answer 1

You need to add display: block; to your a.link class styles. Also, set margin-right: 30px; on your image, and remove the padding-left: 30px; styles from your p.text and a.link elements. Final CSS would be as follows:
.wrapper {
font-family: sans-serif;
width: 400px;
margin-top: 30px;
margin-bottom: 30px;
}
img {
float: left;
margin-right: 30px;
}
p.text {
display: block;
padding-bottom: 22px;
color: #222222;
}
a.link {
text-decoration: none;
text-transform: uppercase;
line-height: 22px;
color: #777777;
display: block;
}

Answer 2

I have a quick solution for you. Looks like you needed to add a container around the text and then add the padding you wish. See below for quick instructions.
Add the following to your css:
div.textcontainer{
padding-left:130px
}
Also remove padding-left:30px from p.text as shown below:
p.text {
display: block;
padding-bottom: 22px;
color: #222222;
}
and lastly add a container around the text as below:
<div class="textcontainer">
//Insert coding you wish
</div>
This is the quick fix to your solution. Ideally you would want to use something like bootstrap or some other css frame work to make this fluid in design. I hope this works for you.