javascript - How to align two span elements separately but in same line -

i working on aligning 2 span elements should present in same line have separated shown in below. code using below.

if not use float:right both texts coming in single line attaching 1 each other.

if use float:right; not aligning in same line, having misalignment between them.

with float:right; result this

without float:right; result this

please give me suggestions this

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

<div>      <span class="savespan" >save default filters</span>     <span class="clearspan" >clear filters</span>   </div>

you can use flexbox that

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 default filters</span>    <span class="clearspan">clear filters</span>  </div>