How can I make my texts appear to be side by side and responsive?

Question

I was trying to make my code side by side but it seems like the odds aren't in my favor with this. I'm having trouble with making them side by side. Here is the code that I use:

  <div class="column" style="box-sizing:border-box;text-align:center;float:left;width:33.33%;padding-top:10px;padding-bottom:10px;padding-right:10px;padding-left:10px;height:300px;" >
    <h2 style="box-sizing:border-box;font-size:50px;color:#fa4616;" >5</h2>
    <p style="box-sizing:border-box;font-size:20px;color:#fa4616;" >Lorem Ipsum</p> 
    <p style="box-sizing:border-box;font-size:20px;color:#fa4616;" >Dolor Sit Amet</p>
  </div>
  <div class="column" style="box-sizing:border-box;text-align:center;float:left;width:33.33%;padding-top:10px;padding-bottom:10px;padding-right:10px;padding-left:10px;height:300px;" >
    <h2 style="box-sizing:border-box;font-size:50px;color:#fa4616;" >40</h2>
    <p style="box-sizing:border-box;font-size:20px;color:#fa4616;" >Lorem Ipsum</p> 
    <p style="box-sizing:border-box;font-size:20px;color:#fa4616;" >Dolor Sit Amet</p>
  </div>
  <div class="column" style="box-sizing:border-box;text-align:center;float:left;width:33.33%;padding-top:10px;padding-bottom:10px;padding-right:10px;padding-left:10px;height:300px;" >
    <h2 style="box-sizing:border-box;font-size:50px;color:#fa4616;" >90</h2>
    <p style="box-sizing:border-box;font-size:20px;color:#fa4616;" >Lorem Ipsum</p> 
    <p style="box-sizing:border-box;font-size:20px;color:#fa4616;" >Dolor Sit Amet</p>
  </div>
</div>

When I try it live, it only appears to be on the bottom of the number and not on the side of the text. I tried making it as a 6 column layout but it looked terrible than this one, I also tried adding a floating box but it didn't work as well.

Here is what I am trying to achieve: what I'm trying to achieve

Am I missing anything? Thanks a lot in advance.

itsanewabstract itsanewabstract · Accepted Answer · 2020-06-23T23:18:43

With a little help from CSS flexbox, relative units, and a liittle more structure to the HTML, you can get your desired result:

.columns {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;

    width: 100vw;

    margin: auto;
}

.column {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.big-num {
    font-size: 10vw;
}

.text-container {
    line-height: 0;
    margin-left: 2.5vw;
}

.text {
    font-size: 1.75vw;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="columns">
        <div class="column" >
            <h2 class="big-num">5</h2>
            <div class="text-container">
                <p class="text">Lorem Ipsum</p> 
                <p class="text">Dolor Sit Amet</p>
            </div>
          </div>
          <div class="column">
            <h2 class="big-num">40</h2>
            <div class="text-container">
                <p class="text">Lorem Ipsum</p> 
                <p class="text">Dolor Sit Amet</p>
            </div>
          </div>
          <div class="column">
            <h2 class="big-num">90</h2>
            <div class="text-container">
                <p class="text">Lorem Ipsum</p> 
                <p class="text">Dolor Sit Amet</p>
            </div>
          </div>
        </div>
    </div>
</body>
</html>

Add in the rest of your styles as you see fit. But it's best practice to use a separate css file and have all your styles included there instead of placing them on each HTML element.

How can I make my texts appear to be side by side and responsive?

1 Answers