如何使2个图标一左一右对齐？

Question

I tried to search the internet, but I saw nothing. My problem is very easy, I have 2 icons and want one of them to be aligned to the left and the other on to the right. The code follows:

<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: right didn't help...

Answer 1

Add This Class 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 works best as it offers minimal code. follow the example below:

 #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>