'How can I make the text and image be on the same level?

I am trying to make the text and image be on the same level but when I add the text the image moves, I am unsure on how to fix it and looking for help.

I thought of trying flexbox but I don't think that will work?

CurrentLooks

Relevant Code:

HTML:

 <div class="ProjectBox">

   <div>
     <h1>test</h1>
   </div>
   
   <div>
   <img src="Commands.png" alt="Bot commands" style="width: 270px " class="IMG2"/> 
   </div>
 </div>

CSS:

.OuterPage {
  margin: 70px;
}

.ProjectBox {
  width: 600px;
  height: 500px;
  background: #fa3f32;
  border: #fa3f32;
}

.Flex1 {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  gap: 50px;
}

.IMG2 {
  position:relative; 
  left: 300px;
  top: 40px;
}```
htmlcssimageflexbox


Solution 1:[1]

If you are using bootstrap try using row and inline-block to align them together

<div class="ProjectBox row">
       <div class="d-inline-block">
         <h1>test</h1>
       </div>
       <div class="d-inline-block">
       <img src="Commands.png" alt="Bot commands" style="width: 270px " /> 
       </div>
     </div>

If it is pure css, can do it with

<div style="display:inline-block "class="ProjectBox ">
   <div style="display:inline-block">
     <h1>test</h1>
   </div>
   <div style="display:inline-block">
   <img src="Commands.png" alt="Bot commands" style="width: 270px " /> 
   </div>
 </div>

Solution 2:[2]

Try adding position: relative; to your .ProjectBox class and position:absolute; + top: 0; to your .IMG2 class

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Vidiya Prasanth Pappannan
Solution 2 Mohamed Ghulam

Related Questions