How to Create Responsive Side by Side Sections in HTML and CSS Only-CodePudding

I want to create a box for pros and cons just like Life Hacker which looks like this:

As a beginner in HTML CSS, I started and so far, I have this:

As can see there is too much overlapping. How do I fix this? Also, I would like to align the text with the list.

HTML:

.indent-1 {
  float: left;
  border: 2px solid orange;
  border-radius: 5px;
  padding-right: 10px;
  padding-left: 10px;
}

.indent-1 section {
  float: left;
}

<section >
  <section>
    <h3>What we like:</h3>
    <ul>
      <li>Pro 1</li>
      <li>Pro 2</li>
      <li>Pro 3</li>
    </ul>
  </section>
  <section>
    <h3>What we don't like:</h3>
    <ul>
      <li>Con 1</li>
      <li>Con 2</li>
      <li>Con 3</li>
    </ul>
  </section>
</section>

Any more suggestions to make it look pretty will be welcomed.

Thanks

CodePudding user response：

Grid is the way to go here as you can use the grid-template-columns to set the width equally. Flexbox will do the same but it need a bit more work, especially if you want to stop your headers wrapping. There's a good introduction to grid from Kevin Powell and CSS tricks also have a good guide. It's very powerful and recommended to learn both flex and grid as they solve a lot of problems from the bad old days.

.indent-1 {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  border: 2px solid orange;
  border-radius: 5px;
  padding-right: 10px;
  padding-left: 10px;
}

<section >
  <section>
    <h3>What we like:</h3>
    <ul>
      <li>Pro 1</li>
      <li>Pro 2</li>
      <li>Pro 3</li>
    </ul>
  </section>
  <section>
    <h3>What we don't like:</h3>
    <ul>
      <li>Con 1</li>
      <li>Con 2</li>
      <li>Con 3</li>
    </ul>
  </section>
</section>

CodePudding user response：

.indent-1 {
  display: flex;
  justify-content: space-between;
  border: 2px solid orangered;
  border-radius: 5px;
  padding: 10px 20px;
}

<section >
  <section>
    <h3>What we like:</h3>
    <ul>
      <li>Pro 1</li>
      <li>Pro 2</li>
      <li>Pro 3</li>
    </ul>
  </section>
  <section>
    <h3>What we don't like:</h3>
    <ul>
      <li>Con 1</li>
      <li>Con 2</li>
      <li>Con 3</li>
    </ul>
  </section>
</section>