items in flex container overlap : When I try this code, the two dots overlap each other as well as the text.

Why? 

How can I get them to be side by side?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->


          .container {
            display: flex;
            flex-direction: row;
          }
          .dot {
            width: 8px;
            height: 8px;
            border-radius: 4px;
            background: black;
          }

<!-- language: lang-html -->

        <div class="container">
          <span class="dot" />      
          <span class="dot" />     
          some text
        </div>

<!-- end snippet -->

