How to make 2 icons to be aligned one to the left and one to the right?

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>

P.S.: Float: right didn't help...

I think you use `Bootstrap- 4`? yes then just replace class `d-flex` on `row` — Lalji Tadhani, Feb 11 '20 at 13:34
Does this answer your question? [Left align and right align within div in Bootstrap](https://stackoverflow.com/questions/18672452/left-align-and-right-align-within-div-in-bootstrap) — Awais, Feb 11 '20 at 13:42
Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do). See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex) — Paulie_D, Feb 11 '20 at 13:44

score 2 · Accepted Answer · answered Feb 11 '20 at 13:45

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/

score -1 · Answer 2 · answered Feb 11 '20 at 13:40

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>

How to make 2 icons to be aligned one to the left and one to the right?

2 Answers2