Как сделать так, чтобы 2 иконки были выровнены одна слева и одна справа?

Question

Я попытался найти inte rnet, но ничего не увидел. Моя проблема очень проста, у меня есть 2 иконки, и я хочу, чтобы одна из них была выровнена по левому краю, а другая по правому. Код следующий:

<div class="container">
    <div class="row">
        <div style="cursor: pointer" onclick="window.history.back()">
            <div class="back-button" data-wow-delay="0.2s" style="padding: 0 0 0 25px">
                <div class="icon color-1" style="margin-bottom: 0">
                    <i class="lni-pointer-left"></i>
                </div>
            </div>
        </div>
        <div style="cursor: pointer" onclick="window.history.back()">
            <div class="back-button" data-wow-delay="0.2s" style="padding: 0 0 0 25px">
                <div class="icon color-1" style="margin-bottom: 0">
                    <i class="lni-pointer-left"></i>
                </div>
            </div>
        </div>
    </div>
</div>

PS: Float: право не помогло ...

Answer 1

Добавить этот класс d-flex justify-content-between

<div class="container">
        <div class="d-flex justify-content-between">
            <div style="cursor: pointer" onclick="window.history.back()">
                <div class="back-button" data-wow-delay="0.2s" style="padding: 0 0 0 25px">
                    <div class="icon color-1" style="margin-bottom: 0">
                        <i class="lni-pointer-left">Icon 1</i>
                    </div>
                </div>
            </div>
            <div style="cursor: pointer" onclick="window.history.back()">
                <div class="back-button" data-wow-delay="0.2s" style="padding: 0 0 0 25px">
                    <div class="icon color-1" style="margin-bottom: 0">
                        <i class="lni-pointer-left">Icon 2</i>
                    </div>
                </div>
            </div>
        </div>
    </div>

https://jsfiddle.net/lalji1051/th05ad8c/1/

Answer 2

flexbox работает лучше всего, так как предлагает минимальный код. следуйте примеру ниже:

#icon-row {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  border: 1px solid lightgrey;
}

a {
  cursor: pointer;
  background-color: lightgrey;
  padding: 5px;
}

<div id="icon-row">
  <a>icon</a>
  <a>icon</a>
</div>