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

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 >

   <div>
     <h1>test</h1>
   </div>
   
   <div>
   <img src="Commands.png" alt="Bot commands" style="width: 270px " /> 
   </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;
}```

CodePudding user response：

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

<div >
       <div >
         <h1>test</h1>
       </div>
       <div >
       <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 ">
   <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>

CodePudding user response：

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