how to align elements side by side in a div?

Question

I have some content which i need to align side by side.i have given flex styling to the element made flex direction column and also applied flex wrap.but the item in only one column.i want to display the item as side like two columns.i added a sample image below which you can refer to.also i am unable to do padding style these contents.kindly fix that also.

<section class="hero2">
        <div class="listeditems">
        <h1>Using Abstract</h1>
        <p>Abstract lets you manage, version, and document your designs in one place.</p>
        <h1>Manage organizations, teams, and projects</h1>
        <p>Use Abstract organizations, teams, and projects to organize your people and your work.</p>
        <h1>Using Abstract</h1>
        <p>Abstract lets you manage, version, and document your designs in one place.</p>
        <h1>Using Abstract</h1>
        <p>Abstract lets you manage, version, and document your designs in one place.</p>
        <h1>Using Abstract</h1>
        <p>Abstract lets you manage, version, and document your designs in one place.</p>
        <h1>Using Abstract</h1>
        <p>Abstract lets you manage, version, and document your designs in one place.</p>
    </div>
    </section>


.hero2{
    
    height: 600px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    

  }

  .hero2 .listeditems{

    margin: auto;
    
  }`

Answer 1

You can accomplish this one of two ways. Regardless, you're gonna have to contain your <h1> and <p> tags with divs.

The way mentioned by emre-ozgun . This way looks a little cleaner, in my opinion:

 .hero2 { height: 600px; display: flex; flex-direction: column; flex-wrap: wrap; }.hero2.listeditems { margin: auto; }.listeditems{ display: grid; grid-template-columns: 1fr 1fr; }

 <section class="hero2"> <div class="listeditems"> <div> <h1>Using Abstract</h1> <p>Abstract lets you manage, version, and document your designs in one place.</p> </div> <div> <h1>Manage organizations, teams, and projects</h1> <p>Use Abstract organizations, teams, and projects to organize your people and your work.</p> </div> <div> <h1>Using Abstract</h1> <p>Abstract lets you manage, version, and document your designs in one place.</p> </div> <div> <h1>Using Abstract</h1> <p>Abstract lets you manage, version, and document your designs in one place.</p> </div> <div> <h1>Using Abstract</h1> <p>Abstract lets you manage, version, and document your designs in one place.</p> </div> <div> <h1>Using Abstract</h1> <p>Abstract lets you manage, version, and document your designs in one place.</p> </div> </div> </section>

Or you can use display: flex; . This way would be a literal side-by-side , as you seemingly requested.

 .hero2 { height: 600px; display: flex; flex-direction: column; flex-wrap: wrap; }.hero2.listeditems { margin: auto; }.listeditems{ display: flex; }

 <section class="hero2"> <div class="listeditems"> <div> <h1>Using Abstract</h1> <p>Abstract lets you manage, version, and document your designs in one place.</p> </div> <div> <h1>Manage organizations, teams, and projects</h1> <p>Use Abstract organizations, teams, and projects to organize your people and your work.</p> </div> <div> <h1>Using Abstract</h1> <p>Abstract lets you manage, version, and document your designs in one place.</p> </div> <div> <h1>Using Abstract</h1> <p>Abstract lets you manage, version, and document your designs in one place.</p> </div> <div> <h1>Using Abstract</h1> <p>Abstract lets you manage, version, and document your designs in one place.</p> </div> <div> <h1>Using Abstract</h1> <p>Abstract lets you manage, version, and document your designs in one place.</p> </div> </div> </section>