Text appearing with no line space when browser is shrunk - html

Question

I've got a problem with my text when the browser is shrunk or on a mobile device. Here is a screenshot to help explain. On a larger screen the 'matched' text is on the same line as 'what is' so there is no problem. Below is the code I'm using at the minute. I would like the gap to be the same as the one below 'matched'. Thanks in advance.
HTML
<div class="outer-wrapper">
<img class="aligncenter wp-image-1015"
src="https://www.thesurebettor.com/wp-content/uploads/2017/05/what-is-
matched-betting-1.jpg" alt="" width="750" height="431" />
<div class="text-wrapper"><p>What is matched</p><p>betting?</P>
</div>
</div>
CSS
.aligncenter {
display: block;
margin: auto;
max-width: 100%;
height: auto;
}
.outer-wrapper {
position: relative;
}
.text-wrapper {
position: absolute;
left: 50%;
top: 35px;
transform: translateX(-90%);
color: white;
font-size: 52px;
font-weight: bold;
}

Answer 1

You are using two paragraphs for the text, but semantically it is one paragraph:
<p>What is matched betting?</p>
This is also the root of your problem - you can solve it using two paragraphs by ensuring the line height and the margins/padding match - but using a single paragraph would be better.

Answer 2

Just add line-height: 1 on .text-wrapper div.
.aligncenter {
display: block;
margin: auto;
max-width: 100%;
height: auto;
}
.outer-wrapper {
position: relative;
}
.text-wrapper {
position: absolute;
left: 50%;
top: 35px;
transform: translateX(-90%);
color: white;
font-size: 52px;
font-weight: bold;
line-height:1;
}
<div class="outer-wrapper">
<img class="aligncenter wp-image-1015"
src="https://www.thesurebettor.com/wp-content/uploads/2017/05/what-is-
matched-betting-1.jpg" alt="" width="750" height="431" />
<div class="text-wrapper"><p>What is matched</p><p>betting?</p></div>
</div>

Answer 3

You written wrong html. please make it correct.
.aligncenter {
display: block;
margin: auto;
max-width: 100%;
height: auto;
}
.outer-wrapper {
position: relative;
}
.text-wrapper {
position: absolute;
left: 50%;
top: 35px;
transform: translateX(-90%);
color: white;
font-size: 52px;
font-weight: bold;
}
<div class="outer-wrapper">
<img class="aligncenter wp-image-1015"
src="https://www.thesurebettor.com/wp-content/uploads/2017/05/what-is-
matched-betting-1.jpg" alt="" width="750" height="431" />
<div class="text-wrapper"><p>What is matched</p><p>betting?</p></div>
</div>

Answer 4

Click here for the Snapshot
Your issue is not reproducible from my end, check the above snapshot.
It may be caused because of some other styling in your css. Anyhow
please make text responsive.
Please include font-size: 100% for the body and use media query to target the screen where the text is overlapping
eg.,
#media only screen and (min-width: 320px) and (max-width: 535px){
//give font-size in percentage for text-wrapper p and if required include line-height as well
}