How do i place the image on the right beside the text?

Question

I have some trouble while trying to place the image on the right and keep the text on the left, while its always centered. I am using inline-block but it doesn't seem to be helpful. Here's how I want it to look.

And this is what I get

Here's the HTML :

<div class="hosting">
    <h1 >Lorem, ipsum.</h1>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, soluta.</br>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos, facere!<br>
        Lorem ipsum dolor sit amet consectetur adipisicing.<br>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.</br>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Debitis, blanditiis.
    </p>
    <img src="images/illustration.png" alt="hosting" class="hosting-img"> 
</div>

and here's the css :

.hosting-img {
    height: 300px;
}
.hosting {
    width: 100%;
    height: 100%;
    margin-top: 150px;
    align-items: center;
    justify-content: center;
    position: relative;
    display: inline-block;
    text-align: center;
}

Answer 1

One option would be to set the width of each element in the .hosting div.

.hosting-img {
    height: 300px;
    width: 50%;
}
.hosting p {
    width: 50%;
}
.hosting {
    width: 100%;
    height: 100%;
    margin-top: 150px;
    align-items: center;
    justify-content: center;
    position: relative;
    display: inline-block;
    text-align: center;
}

For a more robust, responsive solution, you could look into the float property or flexbox.

Answer 2

try adding this to your style

p {
    display: inline-block;
}