Совместите два div рядом друг с другом, используя css, div содержит значок точки и текст

Question

Я должен различать значение 1 и значение 2, используя значок точки, поэтому я написал для него css и поместил его в div, но он накладывается друг на друга. Я просто хочу показать два элемента div рядом со значком и текстом без наложения

    .dot {
            height: 12px;
            width: 12px;
            background-color: #bbb;
            border-radius: 50%;
            display: inline-block;
        }
        .user-values-color{
            background-color: #1BBC9B;
           float: left;
        }
        .default-values-color{
            background-color: #2D3E50;
            float: left;
        }

    <div class="user-values-color dot" ><span style="float:left;">Value 1</span></div>
    
    <div class="default-values-color dot"><span style="float:left;"> value 2</span></div>

Answer 1

Если вы действительно используете начальную загрузку, тогда вы узнаете о Грид-системе , это основной.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="container">
  <div class="row justify-content-start">
    <div class="col-2">
    Value 1
    </div>
    <div class="col-2">
    value 2
    </div>
  </div> 
</div>

теперь вы просто используете встроенный css

Answer 2

извлеките интервал из div, поместите его рядом в родительский контейнер, как показано ниже:

.dot {
   height: 12px;
   width: 12px;
   background-color: #bbb;
   border-radius: 50%;
   display: inline-block;
}
.user-values-color{
  background-color: #1BBC9B;
  float: left;
}
.default-values-color{
  background-color: #2D3E50;
  float: left;
}
.container {
display: inline-block;
}

<div class="container">
    <div class="user-values-color dot" ></div>
    <span style="float:left;">Value 1</span>
  </div>
   <div class="container">
     <div class="default-values-color dot"></div> 
     <span style="float:left;"> value 2</span>
   </div>