My bad… I had interpreted your question as a pseudo-element related question so tackled it from that angle.
Your code above shows fixed image sizes, so let’s approach it with fixed structure that does not need to be adaptive, but static.
Start with a parent container just slightly wider than the sum of the two widths.
<div class="before-after">
</div>
container CSS
/* allow for border on each image and even whitespace around the images */
.before-after {
width: 610px;
margin: 1em auto;
}
Now we can mark up the two captions as paragraphs, each spanning half of the width, above the images.
<div class="before-after">
<p>BEFORE</p><p>AFTER</p>
</div>
caption css
.before-after p {
display: inline-block;
line-height: 1.8em;
text-align: center;
width: 49%;
}
Now we can mark up the image tags…
<div class="before-after">
<p>BEFORE</p><p>AFTER</p>
<img src="https://goo.gl/bHBjLb" alt="BEFORE">
<img src="https://goo.gl/bHBjLb" alt="AFTER">
</div>
img css
.before-after img {
width: 300px;
height: 200px;
border: 1px solid black;
margin: 2px;
}
That’s the theoretical. Now for the practical…
<!DOCTYPE html>
<html>
<head>
<title>Before and After</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="before-after">
<p>BEFORE</p><p>AFTER</p>
<img src="https://goo.gl/bHBjLb" alt="BEFORE">
<img src="https://goo.gl/bHBjLb" alt="AFTER">
</div>
</body>
</html>
style.css
.before-after {
width: 608px;
margin: 1em auto;
border: 1px dotted #1f4056;
padding: 0 4px;
}
.before-after p {
display: inline-block;
line-height: 1.8em;
text-align: center;
width: 49%;
margin: 0;
}
.before-after img {
width: 300px;
height: 200px;
border: 1px solid black;
}
before and after

As you will see in the codebit demo, the container is re-usable in the same document. The two text elements that precede the before and after pics in your code would be above each .before-after
container and not inside them.
<p>Insert text here</p>
<p>Insert name here</p>
<div class="before-after">
<p>BEFORE</p><p>AFTER</p>
<img src="https://goo.gl/bHBjLb" alt="BEFORE">
<img src="https://goo.gl/bHBjLb" alt="AFTER">
</div>
While it would add structure, the above would fit nicely into a container with its own class (which is also re-usable in the same document).
<div class="testimonial">
<p>Insert text here</p>
<p>Insert name here</p>
<div class="before-after">
<p>BEFORE</p><p>AFTER</p>
<img src="https://goo.gl/bHBjLb" alt="BEFORE">
<img src="https://goo.gl/bHBjLb" alt="AFTER">
</div>
</div>
Style rules for the paragraphs would need to be above the earlier style rules in the cascade so as not to interfere with those in the before-after
containers.
.testimonial p {
/* declarations */
}
.before-after {
}
...