Spans not stacking in the same line

Issue

I'm trying to add 3 spans in the same line but they keep taking up all the width of the page each and ending up in different lines.

This is the code and below is the style:

.image-container {
    position: relative;
    width: 600px;
    height: 300px;
    text-align: center;
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
    }

    .info-container {
    position: relative;
    width: 200px;
    height: 280px;
    text-align: center;
    }

<div class="image-container">
    <span class=info-container>
        <div class="dot"></div>
        <div class="dot-text">Test</div>
    </span>
    <span class=info-container>
        <div class="dot"></div>
        <div class="dot-text">Test</div>
    </span>
    <span class=info-container>
        <div class="dot"></div>
        <div class="dot-text">Test</div>
    </span> 
  </div>

I've tried with the image-container as both <div> and <span> but neither works. Dot and dot-text have 100px of both height and width

Solution

You need to use display: inline-block

Read more here about the display property

.image-container {
    position: relative;
    width: 600px;
    height: 300px;
    text-align: center;
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
}

.info-container {
    position: relative;
    width: 100px;
    height: 280px;
    text-align: center;
    display: inline-block; // <-- This
}

<div class="image-container">
    <span class=info-container>
        <div class="dot"></div>
        <div class="dot-text">Test</div>
    </span>
    <span class=info-container>
        <div class="dot"></div>
        <div class="dot-text">Test</div>
    </span>
    <span class=info-container>
        <div class="dot"></div>
        <div class="dot-text">Test</div>
    </span> 
</div>

Answered By - StudioTime