Div to image next to each other - html

Question

I don't know how and where to put the image in the structure so that it displays on the right side of the users screen.
I tried using float left, float right, on the specific html elements with width of 40% and 60%.. But the problem is that it will split the Paragraph smaller, but i don't want that to happen. Everything should stay in place, same height, width, but the image should be on the right side of the Screen while the text is on the same height, on the left.
.textl {
float: left;
display: grid;
place-items: left;
align-content: center;
text-align: left;
min-height: 20vh;
padding-left: 10%;
padding-top: 10%;
}
#textl-p {
width: 40%;
}
h1 {
font-size: 4rem;
margin-bottom: 20px;
font-family: Montserrat;
font-weight: 100;
color: white;
}
p {
font-size: 1.5rem;
font-family: Poppins;
font-weight: 300;
justify-content: justify;
color: white;
}
.button {
padding: 9px 20px;
border: 2px solid white;
border-radius: 90px;
width: 10%;
margin-top: 1%;
transition: 0.3s ease 0s;
text-align: center;
font-family: Poppins;
}
/* added by community for clarity */
body {
background: #aaa;
}
<div class="textl">
<h1 id="welcome">Guten Tag</h1>
<p id="textl-p" ">
example text
</p>
<div class="button ">examplebutton</div>
</div>
<img src="https://via.placeholder.com/100 ">