How can I align this image evenly with my other text? - html

Question

Looking to align this image on the right with the other text that I have. When I run the code, it pushes the margin down and places the image below the text to the right. Preferably I'd like the image evenly with the top text. Any recommendations to help as well as suggestions for cleaning up code are appreciated.
<div class="main">
<h1 class="awesome" <strong>Welcome!</strong></h1>
<div class="text"<small><p>This website has some subtext that goes here under the main title.</p>
<p>Its a smaller font and the color is lower.</p> </small> </div>
<div class="button1"
<button> Sign Up </button>
</div>
<div class="Image">
<img src="Images/download.jpg"
alt="Rocket"
</div>
</div>
</div>
.main{
display: flex;
flex-direction: column;
flex-wrap: wrap;
background-color: #1F2937;
font-family: 'Roboto';
margin-bottom: 25px;
padding-left: 25px;
}
.awesome{
font-size: 48px;
font-weight: bolder;
color: #f9faf8;
}
.text{
align-self: flex-start;
color: #f9faf8;
}
.button1{
font-family: 'Roboto';
border: black;
border-radius: 8px;
padding: 10px;
width: fit-content;
height: fit-content;
background: #3882f6;
}
.Image{
align-self: flex-end;
}

Answer 1

You can put the text block (heading, text, button) in a container and use flexbox to position it next to the image like the example below. This way you can ommit most of the flex alignment css you had previously.
If you wanted something else, please add a picture of what you are trying to achieve.
.main{
display: flex;
background-color: #1F2937;
font-family: 'Roboto';
margin-bottom: 25px;
padding-left: 25px;
gap: 10px;
}
.awesome{
font-size: 48px;
font-weight: bolder;
color: #f9faf8;
}
.text{
color: #f9faf8;
}
.button1{
font-family: 'Roboto';
border: black;
border-radius: 8px;
padding: 10px;
width: fit-content;
height: fit-content;
background: #3882f6;
}
<div class="main">
<div>
<h1 class="awesome"><strong>Welcome!</strong></h1>
<div class="text">
<small>
<p>This website has some subtext that goes here under the main title.</p>
<p>Its a smaller font and the color is lower.</p>
</small>
<button class="button1"> Sign Up </button>
</div>
</div>
<img src="https://picsum.photos/id/237/300/300" alt="Rocket"/>
</div>