Как выровнять два элемента span отдельно, но в одной строке

Question

Я работаю над выравниванием двух элементов span, которые должны присутствовать в одной строке, но разделены, как показано ниже. Код, который я использую, приведен ниже.

Если я не использую float:right, оба текста идут в одной строке с прикреплением друг к другу.

Если я использую float:right;, они не выровнены в одной строке, имеют некоторое несоосность между ними.

с float:right; результатом будет этот

без float:right; результат будет этот

Пожалуйста, дайте мне предложения по этому

.clearSpan { 
 
    color: $alt-dark-blue; 
 
    float: right; 
 
    cursor: pointer; 
 
    clear: both; 
 
    font-size: 10px; 
 
} 
 

 
.saveSpan { 
 
    color: $alt-dark-blue; 
 
\t clear : both; 
 
    cursor: pointer; 
 
    font-size: 10px; 
 
}

<div> 
 
    <span class="saveSpan" >Save as Default Filters</span> 
 
    <span class="clearSpan" >Clear All Filters</span> 
 
</div>

Answer 1

вы можете использовать flexbox для этого

div { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    border-bottom: 1px solid grey 
 
} 
 
span { 
 
    color: blue; 
 
    cursor: pointer; 
 
    font-size: 10px; 
 
}

<div> 
 
    <span class="saveSpan">Save as Default Filters</span> 
 
    <span class="clearSpan">Clear All Filters</span> 
 
</div>

Answer 2

Может быть, вы можете сделать:

.clearSpan { 
    margin-left: 15px; 
} 

или

.saveSpan { 
    margin-right: 15px; 
} 

Это должно отделить его.

Answer 3

Вы должны определить стиль для пролетных тегов, как,

span { 
    display: inline-block; 
}