How do I center an image alongside multiple paragraphs - html

Question

I have been at this for a while and I haven't really found a clear fix besides using Grids or Flexbox where I have an image in one column and paragraphs in the other, though surely that is not the best way to do it, is it? Ideally what I want to achieve is have my image and paragraphs dead in the middle, image on the left and the paragraphs on the right. I also tried using floats, but that gets me nowhere, the closest I got to the result that I want was with Flexbox, though by using flexbox the image would not scale down with screen size, so I am looking for another solution or for someone more knowledgeable to help me. I looked around online and some people bring up using span instead of paragraph, is that a good solution, common practice?
h3 {
font-family: 'Raleway';
font-weight: 700;
color: #979b9e;
}
.wrapper {
background-color: black;
margin-top: 5%;
text-align: left;
}
.aboutme {
float: left;
background-size: cover;
height: auto;
width: 5%;
display: block;
}
p {
color: #000;
display: inline-block;
font-family: 'Raleway';
font-weight: 400;
color: #979b9e;
text-align: left;
font-size: 1em;
float: right;
}
<div class="wrapper">
<img class="aboutme" src="img/aboutme.jpg">
<h3>x</h3>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
</div>

Answer 1

Flexbox is most certainly a clean alternative to laying out content. Simply set up a parent element with a display: flex value (I changed 'wrapper' to 'row' for learning purposes). The immediate children can have a predefined width if you intend to use a grid system.
.row {
display: flex;
background-color: #f1f1f1;
}
.col-3 { width: 25%; }
.col-9 { width: 75%; }
.aboutme {
max-width: 100%;
}
h3 {
font-family: 'Raleway';
font-weight: 700;
margin: 0;
color: #979b9e;
}
p {
color: #000;
margin: 0;
display: block;
font-family: 'Raleway';
font-weight: 400;
}
<div class="row">
<div class="col-3">
<img class="aboutme" src="https://via.placeholder.com/100">
</div>
<div class="col-9">
<h3>Title</h3>
<p>Paragraph</p>
</div>
</div>

Answer 2

Your questions is very broad but does this achieve what you're after?
It doesn't use grids or flexboxes. You can condense this code even further too but this is just to give you a rough idea
.half {
float: left;
display: inline-block;
width: 50%;
}
.half img {
float: left;
display: inline-block;
width: 100%;
}
h3 {
display: inline-block;
width: 100%;
font-family: 'Raleway';
font-weight: 700;
color: #979b9e;
}
p {
color: #000;
display: inline-block;
display: block;
width: 100%;
font-family: 'Raleway';
font-weight: 400;
color: #979b9e;
text-align: left;
font-size: 1em;
float: right;
}
<div class="half">
<img class="aboutme" src="https://images.homedepot-static.com/productImages/22b7f2be-265e-4572-8246-bea85069604a/svn/costa-farms-house-plants-6zz-64_1000.jpg">
</div>
<div class="half">
<h3>Texttttt</h3>
<p>Texttttt</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
</div>