Putting 2 divs side by side?

Question

<div class="snippet">
  <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
    <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
    <script>
          hbspt.forms.create({portalId: "4801849",formId: "b021b49f-c504-4b1d-ad2b-1bb9e587287c"});
    </script>
</div>

<div class="location">
    <strong>Our Locations</strong>
    <p>Mumbai</p>
    <p>Inventrom Private Limited, Unit no. B 32-A, B-wing, 2nd Floor, Raj Industrial Complex, Military Road, Marol, Andheri East, Mumbai, Maharashtra-400059</p>
    <p>Goa</p>
    <p>Inventrom Private Limited, 10, Gaspar Apartment, behind Suzuki showroom, Panjim, Goa-403001, Near People's High School</p>
    <p></p>
    <strong>Contact Us</strong>
    <p>79, 11th Cross Rd, Binnamangala Indiranagar, Bengaluru, Karnataka-560038, India</p>
    <p>(+91) 8881197198</p>
    <p>contactus@boltiot.com</p>
</div>

How do I put 2 divs side by side?? I've many things to fix this but nothing seems to be helpful. I want the 1st div to be on the left-hand side of the main div and the 2nd div to be on the right-hand side

This is a duplicate of many, many, many questions on Stack Overflow. Please indicate which ones you've tried and how they didn't work for you. — Heretic Monkey, Jul 31 '21 at 11:24

score 0 · Answer 1 · answered Jul 31 '21 at 11:21

There are several ways to achieve this. One of the simplest ones is to use a flex wrapper.

<div class="wrapper">
  <div class="snippet">
  <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
    <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
    <script>
          hbspt.forms.create({portalId: "4801849",formId: "b021b49f-c504-4b1d-ad2b-1bb9e587287c"});
    </script>
</div>

<div class="location">
    <strong>Our Locations</strong>
    <p>Mumbai</p>
    <p>Inventrom Private Limited, Unit no. B 32-A, B-wing, 2nd Floor, Raj Industrial Complex, Military Road, Marol, Andheri East, Mumbai, Maharashtra-400059</p>
    <p>Goa</p>
    <p>Inventrom Private Limited, 10, Gaspar Apartment, behind Suzuki showroom, Panjim, Goa-403001, Near People's High School</p>
    <p></p>
    <strong>Contact Us</strong>
    <p>79, 11th Cross Rd, Binnamangala Indiranagar, Bengaluru, Karnataka-560038, India</p>
    <p>(+91) 8881197198</p>
    <p>contactus@boltiot.com</p>
</div>
</div>

.wrapper {
  display: flex;
}

This will put the two divs side by side.

score -1 · Answer 2 · answered Jul 31 '21 at 11:26

<div class="snippet">
  <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
    <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
    <script>
          hbspt.forms.create({portalId: "4801849",formId: "b021b49f-c504-4b1d-ad2b-1bb9e587287c"});
    </script>
</div>

<div class="location" style="display:flex">
    <strong>Our Locations</strong>
    <p>Mumbai</p>
    <p>Inventrom Private Limited, Unit no. B 32-A, B-wing, 2nd Floor, Raj Industrial Complex, Military Road, Marol, Andheri East, Mumbai, Maharashtra-400059</p>
    <p>Goa</p>
    <p>Inventrom Private Limited, 10, Gaspar Apartment, behind Suzuki showroom, Panjim, Goa-403001, Near People's High School</p>
    <p></p>
    <strong>Contact Us</strong>
    <p>79, 11th Cross Rd, Binnamangala Indiranagar, Bengaluru, Karnataka-560038, India</p>
    <p>(+91) 8881197198</p>
    <p>contactus@boltiot.com</p>
</div>

Putting 2 divs side by side?

2 Answers2