Position paragraph relative to image in css

Question

aside {
    float: left;
    width: 30%;
    display: block;
}

#img1,
#img2,
#img3,
#img4 {
    padding-top: 20px;
}

#pRight {
    float: right;
    width: 66%;
}

#pRight2 {
    padding-top: 100px;
    float: right;
    width: 66%;
}

#pRight3 {
    padding-top: 80px;
    float: right;
    width: 66%;
}

#pRight4 {
    padding-top: 140px;
    float: right;
    width: 66%;
}

 <aside>
        <img id="img1" src="Images/fotohome1.jpg" alt="" width="100%" height="100%">
        <img id="img2" src="Images/fotohome2.jpg" alt="" width="100%" height="100%">
        <img id="img3" src="Images/fotohome3.jpg" alt="" width="100%" height="100%">
        <img id="img4" src="Images/fotohome4.jpg" alt="" width="100%" height="100%">
</aside>

    <p id="pRight">Het chirojaar begint in september met onze traditiegetrouwe startdag en eindigt met een spetterend bivak. Wij hebben een gemotiveerde leidingsploeg die zich op vrijwillige basis een heel jaar lang inzet. Chiro betekent voor de leiding veel meer dan zondagnamiddag alleen. Wij organiseren immers ook een fuif, een spaghettiavond, een kamp en nog veel meer. Door dit te organiseren, zorgen wij voor extra geld in het laatje. Daarmee kopen wij materiaal, vieruurtjes e.d. en dit komt onze chirowerking ten goede. </p>

    <p id="pRight2">Het chirokamp zit er weer op. Het was een spetterend kamp en iedereen heeft er van genoten! De leiding van Chiro Betekom wil graag iedereen bedanken voor dit fantastische kamp. Dit jaar hadden we een nieuwe kookploeg en die hebben heel lekker eten voor ons gemaakt. Een welverdiende dankjewel aan heel de kookploeg! Natuurlijk is er ook geen kamp zonder onze leuke leden! Wij hebben ons super geamuseerd met jullie! Chiro Betekom is een toffe bende! Wij kunnen alvast niet meer wachten tot het nieuwe chirojaar begint. Hopelijk bent u er ook bij!</p>

    <p id="pRight3">De hoofdleiding leidt elke zondag de chiro. Zij zorgen voor een goede sfeer binnen het leidingsteam. Als u nog verdere algemene vragen hebt, dan kan u zeker bij hen terecht!</p>
    
    <p id="pRight4">Onze kidsparty gaat door op dezelfde dag als de grote fuif, ze start om 16u en duurt tot 19u.
Alle kindjes (en natuurlijk ook de ouders) zijn welkom om te komen dansen op de populairste beats van het moment. Er zal ook een schminkstand zijn!</p>

I'm trying to position 4 images and 4 paragraphs so that the paragraphs are always next to an image even when resizing the screen so that it is smaller. To illustrate what I mean, you might want to take a look at this photo:

When I make my screen smaller, the paragraphs appear randomly on the screen and I would like to positions them so that they are always next the each image respectively, how would I go about doing this?

Answer 1

First Solution

Less code. Improved semantic.

Fiddle

https://jsfiddle.net/me9nkq1q/

One benefit here: Your text gets vertically aligned and it looks nice if you text length varies from paragraph to paragraph.

Markup

<article>
    <img src="http://placehold.it/150x150" alt="image content description" />
    <p>Lorem ipsum dolor</p>
</article>
<article>
    <img src="http://placehold.it/150x150" alt="image content description" />
    <p>Lorem ipsum dolor sit amet</p>
</article>

CSS

article {
    display: table;
}

img, p {
    padding: 10px;
    display: table-cell;
    vertical-align: middle;
}

From here it should be easy for you to adapt this to our needs.

Responsive solution

Fiddle

https://jsfiddle.net/6uzoe6tw/

Markup

<article>
    <div>
        <img src="http://placehold.it/150x150" />
    </div>
    <p>Het chirojaar begint in september met onze traditiegetrouwe startdag en eindigt met een spetterend bivak. Wij hebben een gemotiveerde leidingsploeg die zich op vrijwillige basis een heel jaar lang inzet. Chiro betekent voor de leiding veel meer dan zondagnamiddag alleen. Wij organiseren immers ook een fuif, een spaghettiavond, een kamp en nog veel meer. Door dit te organiseren, zorgen wij voor extra geld in het laatje. Daarmee kopen wij materiaal, vieruurtjes e.d. en dit komt onze chirowerking ten goede.</p>
</article>
<article>
    <div>
        <img src="http://placehold.it/150x150" />
    </div>
    <p>De hoofdleiding leidt elke zondag de chiro. Zij zorgen voor een goede sfeer binnen het leidingsteam. Als u nog verdere algemene vragen hebt, dan kan u zeker bij hen terecht!</p>
</article>

CSS

article {
    display:table;
}

div, p {
    padding:10px;
    display:table-cell;
    vertical-align:middle;
}

div {
    width:30%;
}

p {
    width:70%
}

img {
    height: auto;
    width:100%;
}

Answer 2

Try this https://jsfiddle.net/2Lzo9vfc/129/

HTML

<div class="block">
  <img src="http://placehold.it/150x50" alt="">
  <p class="text">Lorem Ipsum</p>
</div>
<div class="block">
  <img src="http://placehold.it/150x50" alt="">
  <p class="text">Lorem Ipsum</p>
</div>
<div class="block">
  <img src="http://placehold.it/150x50" alt="">
  <p class="text">Lorem Ipsum</p>
</div>
<div class="block">
  <img src="http://placehold.it/150x50" alt="">
  <p class="text">Lorem Ipsum</p>
</div>

CSS

.block img {
    float: left;
    display: inline-block;
    margin-right: 50px;
}

.text {
    padding: 14px 30px;
    border: 1px solid black;   
    display: inline-block;
}

EDIT Solution 2 https://jsfiddle.net/2Lzo9vfc/130/

CSS

.block img {
    margin-right: 50px;
    display: table-cell;
}

.content {
    display: table;
}

.block {
    display: table-row;
}

.text {
    padding: 14px 30px;
    border: 1px solid black;
    display: table-cell;
}