Align two div horizontally same line not working for bootstarp 4-CodePudding

In my HTML, I have two horizontally aligned divs. So, to align these divs in the same line, I'm utilising bootstrap classes. However, with this code, the second div appears underneath the first div.

<div >
     <div >
        <div >
        <div >
           <h2 >Invite trainees  </h2>
           <div >
              <p > 
              bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
              bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
              bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
              bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.  
              </p>
           </div>
           <div >  
              <img src="images/vector.png" >
           </div>
          
        </div>
        </div>
     </div>
  </div>

CodePudding user response：

Parent div should have the class of **row**. Please try Below Code and check

`<div > 
    <div >
    <div >
        <div >
           <h2 >Invite trainees  </h2>
           <div >
              <p > 
              bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
              bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
              bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
              bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.  
              </p>
           </div>
           <div >  
              <img src="images/vector.png" >
           </div>
          </div>
        </div>
    </div>
</div>`

CodePudding user response：

div class with class .col should have parent div with class .row. so your code would be

   <div class-'row>
               <div >
                  <p > 
                  bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
                  bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
                  bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
                  bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.  
                  </p>
               </div>
               <div >  
                  <img src="images/vector.png" >
               </div>
    </div>