TO DO APP - how to align the 2 icons to the right of the li?

TO DO APP - how to align the 2 icons to the right of the li?

bootstrap
glyphicon
bootstrap icons
bootstrap navbar
bootstrap buttons
font awesome icons
materialize navbar examples
bootstrap 4 icons

I am doing a to-do list using JavaScript to practice events. In javascript I created <li> and <i> with specific className attached to the li with append Child. When clicking the button the li goes to the output. Everything works fine but what happens is that the icons are first and then the text of the li, like it had a align right. This is the image :

what I want is this, the text aligned to the left the icons to align to the end (right). exactly like the image. no matter the length of the text:

I have tried display flex but nothing happens.

(function(){
                'use strict'

                const input = document.querySelector('#input-todo')
                const btn = document.querySelector('#button-todo')
                const ul = document.querySelector('#list')


                btn.addEventListener('click', () =>{

                    const li = document.createElement('li')
                    const iCheck = document.createElement('i')
                          iCheck.className='fas fa-check'
                    const iTrash = document.createElement('i')
                          iTrash.className='far fa-trash-alt'
                    const textInput = document.createTextNode(input.value)
                    li.appendChild(iCheck)
                    li.appendChild(iTrash)
                    li.appendChild(textInput)
                    ul.appendChild(li)

                    input.value = ''
                    input.focus()

                })

                input.addEventListener('keyup', (e)=>{
                    if(e.target.keyCode === 13){
                        const li = document.createElement('li')
                        const iCheck = document.createElement('i')
                              iCheck.className='fas fa-check'
                        const iTrash = document.createElement('i')
                              iTrash.className='fas fa-trash-alt'
                        const textInput = document.createTextNode(input.value)
                        li.appendChild(iCheck)
                        li.appendChild(iTrash)
                        li.appendChild(textInput)
                        ul.appendChild(li)

                        input.value = ''
                        input.focus()
                    }
                })


            })()
:root{
 --color-primary: rgb(91, 213, 224);
 --color-secondary:rgb(240, 128, 128);
 --color-tertiary:rgb(2, 0, 117);
}


*,
*:after,
*:before {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

html{
    font-size:100%;
    height:100vh;
}

body {
    font-family:sans-serif;
    box-sizing: border-box;
    line-height:1.7;
    height:100vh;

    display:flex;
    justify-content:center;
    align-items: center;
}

.container{
    background:linear-gradient(to right top, var(--color-primary), var(--color-tertiary));
    border-radius:3px;
    /* how to do a box-shadow looking smooth */
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12),
    0 2px 2px rgba(0, 0, 0, 0.12),
    0 4px 4px rgba(0, 0, 0, 0.12),
    0 8px 8px rgba(0, 0, 0, 0.12),
    0 16px 16px rgba(0, 0, 0, 0.12);
    padding:2rem;

    display:grid;
    grid-template-rows:min-content minmax(10rem,max-content) min-content;
    grid-template-columns: repeat(auto-fit,minmax(25rem,max-content))
}

.item1{
    grid-row: 1 / 2;
    grid-column:1 / -1;
    text-align:center;
}

.item2{
    grid-row: 2 / 3;
    grid-column:1 / -1;
    margin:2rem 0;

}

.item3{
    grid-row: 3 / 4;
    grid-column:1 / -1;

    display:flex;
    flex-direction: row;
    justify-content:space-between;
}



.title{
    color:var(--color-secondary);
}

.subtitle{
    color:var(--color-tertiary);
    font-size:1rem;
}

.list-todo{
    list-style-type:none;

}

li {
    background-color:white;
    padding:.5rem 1rem;
    color: var(--color-tertiary);
    font-size: 1rem;
    font-weight: 600;
     margin:1rem 0;

    /* display:flex;
    align-items:center;
    justify-content:flex-start; */

}
/* ICONS */

.fas:first-child{
   margin-left:auto;

}
.fas,
.far{
    margin:0 1rem;
}

.fa-check{
    color:var(--color-tertiary);
}

.fa-trash-alt{
    color:var(--color-secondary);
}



.write-todo{
    padding:.5rem 1.5rem;
    outline:transparent;
    border:none;

}

.add-todo{
    padding:.3rem .5rem;
    border:1px solid white;
    background-color:white;
    color: var(--color-secondary);
    font-weight:600;
    font-size:1rem;
    letter-spacing: .2rem;
    cursor:pointer;
}
<div class="container">

                <div class="item1">
                    <h2 class="title">To Do App</h2>
                    <h3 class="subtitle">Write here your to do´s</h3>
                </div>
                <div class="item2">
                    <ul class="list-todo" id ="list">

                    </ul>
                </div>
                <div class="item3">
                    <input class="write-todo" id="input-todo" type="text">
                    <button class="add-todo" id='button-todo' type="submit">Add Note</button>
                </div>

       </div>

Firstly you need to reorder your elements so the text will be displayed first then the icons ... justify-content : flex-start will show all your li elements at the start ( which is the left side) a solution will be to use justify-content : space-between instead and then nest your icons into a single element so they get pushed together to the other side ( you can also use margin-left : auto) here is a snippet :

(function(){
                'use strict'

                const input = document.querySelector('#input-todo')
                const btn = document.querySelector('#button-todo')
                const ul = document.querySelector('#list')


                btn.addEventListener('click', () =>{
                    const span = document.createElement('span')     
                    const li = document.createElement('li')
                    const iCheck = document.createElement('i')
                          iCheck.className='fa fa-check'
                    const iTrash = document.createElement('i')
                          iTrash.className='fa fa-trash'
                    const textInput = document.createTextNode(input.value)
                  
                    span.appendChild(iCheck)
                    span.appendChild(iTrash)
                    li.appendChild(textInput)
                    li.appendChild(span)
                    ul.appendChild(li)

                    input.value = ''
                    input.focus()

                })

                input.addEventListener('keyup', (e)=>{
                    if(e.target.keyCode === 13){
                        const li = document.createElement('li')
                        const iCheck = document.createElement('i')
                              iCheck.className='fas fa-check'
                        const iTrash = document.createElement('i')
                              iTrash.className='fas fa-trash-alt'
                        const textInput = document.createTextNode(input.value)
                        li.appendChild(iCheck)
                        li.appendChild(iTrash)
                        li.appendChild(textInput)
                        ul.appendChild(li)

                        input.value = ''
                        input.focus()
                    }
                })


            })()
:root{
 --color-primary: rgb(91, 213, 224);
 --color-secondary:rgb(240, 128, 128);
 --color-tertiary:rgb(2, 0, 117);
}


*,
*:after,
*:before {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

html{
    font-size:100%;
    height:100vh;
}

body {
    font-family:sans-serif;
    box-sizing: border-box;
    line-height:1.7;
    height:100vh;

    display:flex;
    justify-content:center;
    align-items: center;
}

.container{
    background:linear-gradient(to right top, var(--color-primary), var(--color-tertiary));
    border-radius:3px;
    /* how to do a box-shadow looking smooth */
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12),
    0 2px 2px rgba(0, 0, 0, 0.12),
    0 4px 4px rgba(0, 0, 0, 0.12),
    0 8px 8px rgba(0, 0, 0, 0.12),
    0 16px 16px rgba(0, 0, 0, 0.12);
    padding:2rem;

    display:grid;
    grid-template-rows:min-content minmax(10rem,max-content) min-content;
    grid-template-columns: repeat(auto-fit,minmax(25rem,max-content))
}

.item1{
    grid-row: 1 / 2;
    grid-column:1 / -1;
    text-align:center;
}

.item2{
    grid-row: 2 / 3;
    grid-column:1 / -1;
    margin:2rem 0;

}

.item3{
    grid-row: 3 / 4;
    grid-column:1 / -1;

    display:flex;
    flex-direction: row;
    justify-content:space-between;
}



.title{
    color:var(--color-secondary);
}

.subtitle{
    color:var(--color-tertiary);
    font-size:1rem;
}

.list-todo{
    list-style-type:none;

}

li {
    background-color:white;
    padding:.5rem 1rem;
    color: var(--color-tertiary);
    font-size: 1rem;
    font-weight: 600;
     margin:1rem 0;
    display:flex;
    align-items:center;
    justify-content:space-between; 

}
/* ICONS */

.fa:first-child{
   margin-left:auto;

}
.fa,
.fa{
    margin:0 1rem;
}

.fa-check{
    color:var(--color-tertiary);
}

.fa-trash-alt{
    color:var(--color-secondary);
}



.write-todo{
    padding:.5rem 1.5rem;
    outline:transparent;
    border:none;

}

.add-todo{
    padding:.3rem .5rem;
    border:1px solid white;
    background-color:white;
    color: var(--color-secondary);
    font-weight:600;
    font-size:1rem;
    letter-spacing: .2rem;
    cursor:pointer;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">

                <div class="item1">
                    <h2 class="title">To Do App</h2>
                    <h3 class="subtitle">Write here your to do´s</h3>
                </div>
                <div class="item2">
                    <ul class="list-todo" id ="list">

                    </ul>
                </div>
                <div class="item3">
                    <input class="write-todo" id="input-todo" type="text">
                    <button class="add-todo" id='button-todo' type="submit">Add Note</button>
                </div>

       </div>

Align icon and text in one line with proper alignment, Setting margins on it seem to do nothing or set's margin to complete text and image which is worthless. Here is the solution to set the correct style to align icon and text in 2. 3. 4. < ul id = "contact_ul" >. < li id = "li_phone" > < ion-icon name Top 7 Mobile App Development Trends to Catch Fire in 2020. Auto Arrange Icons on your Desktop will always align them top left on your Desktop To manually manage your icons as you like to have them on your Desktop, you must disable Auto-Arrange, by right clicking your Desktopn and choosing View - 'Auto arrange Icons' Right, and changing the code for that probably is too hard or impossible in Windows.


Don't touch your style , just change the order of your append like this in your js function:

li.appendChild(textInput)  // this will append your text
li.appendChild(iCheck)     // this will append the checked icon
li.appendChild(iTrash)     // this will append the trash icon

Creating Mobile Apps with jQuery Mobile, /icons/icons-gray/208-facebook.png); width: 22px; background-size : 2 2px text-​align:left; ul. curl li: after { left : auto; right: 10px; -webkit-transform: skew (15  How to Arrange or Move Icons To arrange icons by name, type, date, or size, right-click a blank area on the desktop, and then click Arrange Icons. Click the command that indicates how you want to arrange the icons (by Name, by Type, and so on). If you want the icons to be automatically arranged, click Auto Arrange.


If you're using bootstrap (and fontawesome i guess, looking to the fa fa items), you can easily use the pull-right class, like this (check that i add those classes only in the click event)

(function(){
                'use strict'

                const input = document.querySelector('#input-todo')
                const btn = document.querySelector('#button-todo')
                const ul = document.querySelector('#list')


                btn.addEventListener('click', () =>{

                    const li = document.createElement('li')
                    li.className='block'
		    const iCheck = document.createElement('i')
                    iCheck.className='fa fa-check pull-right'
	            const iTrash = document.createElement('i')
                    iTrash.className='fa fa-trash pull-right'
                    const textInput = document.createTextNode(input.value)
                    li.appendChild(iCheck)
                    li.appendChild(iTrash)
                    li.appendChild(textInput)
                    ul.appendChild(li)

                    input.value = ''
                    input.focus()

                })

                input.addEventListener('keyup', (e)=>{
                    if(e.target.keyCode === 13){
                        const li = document.createElement('li')
                        const iCheck = document.createElement('i')
                              iCheck.className='fas fa-check'
                        const iTrash = document.createElement('i')
                              iTrash.className='fas fa-trash-alt'
                        const textInput = document.createTextNode(input.value)
                        li.appendChild(iCheck)
                        li.appendChild(iTrash)
                        li.appendChild(textInput)
                        ul.appendChild(li)

                        input.value = ''
                        input.focus()
                    }
                })


            })()
:root{
 --color-primary: rgb(91, 213, 224);
 --color-secondary:rgb(240, 128, 128);
 --color-tertiary:rgb(2, 0, 117);
}


*,
*:after,
*:before {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

html{
    font-size:100%;
    height:100vh;
}

body {
    font-family:sans-serif;
    box-sizing: border-box;
    line-height:1.7;
    height:100vh;

    display:flex;
    justify-content:center;
    align-items: center;
}

.container{
    background:linear-gradient(to right top, var(--color-primary), var(--color-tertiary));
    border-radius:3px;
    /* how to do a box-shadow looking smooth */
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12),
    0 2px 2px rgba(0, 0, 0, 0.12),
    0 4px 4px rgba(0, 0, 0, 0.12),
    0 8px 8px rgba(0, 0, 0, 0.12),
    0 16px 16px rgba(0, 0, 0, 0.12);
    padding:2rem;

    display:grid;
    grid-template-rows:min-content minmax(10rem,max-content) min-content;
    grid-template-columns: repeat(auto-fit,minmax(25rem,max-content))
}

.item1{
    grid-row: 1 / 2;
    grid-column:1 / -1;
    text-align:center;
}

.item2{
    grid-row: 2 / 3;
    grid-column:1 / -1;
    margin:2rem 0;

}

.item3{
    grid-row: 3 / 4;
    grid-column:1 / -1;

    display:flex;
    flex-direction: row;
    justify-content:space-between;
}



.title{
    color:var(--color-secondary);
}

.subtitle{
    color:var(--color-tertiary);
    font-size:1rem;
}

.list-todo{
    list-style-type:none;

}

li {
    background-color:white;
    padding:.5rem 1rem;
    color: var(--color-tertiary);
    font-size: 1rem;
    font-weight: 600;
     margin:1rem 0;

    /* display:flex;
    align-items:center;
    justify-content:flex-start; */

}
/* ICONS */

.fas:first-child{
   margin-left:auto;

}
.fas,
.far{
    margin:0 1rem;
}

.fa-check{
    color:var(--color-tertiary);
}

.fa-trash-alt{
    color:var(--color-secondary);
}



.write-todo{
    padding:.5rem 1.5rem;
    outline:transparent;
    border:none;

}

.add-todo{
    padding:.3rem .5rem;
    border:1px solid white;
    background-color:white;
    color: var(--color-secondary);
    font-weight:600;
    font-size:1rem;
    letter-spacing: .2rem;
    cursor:pointer;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="container">

                <div class="item1">
                    <h2 class="title">To Do App</h2>
                    <h3 class="subtitle">Write here your to do´s</h3>
                </div>
                <div class="item2">
                    <ul class="list-todo" id ="list">

                    </ul>
                </div>
                <div class="item3">
                    <input class="write-todo" id="input-todo" type="text">
                    <button class="add-todo" id='button-todo' type="submit">Add Note</button>
                </div>

       </div>

Bootstrap 4 – Responsive Web Design, <li class="list-group-item"> Captured mice <span class="label <span class="​label label-default">2</span> </li> <li class="list-group-item"> Always alert your web page right now, you will see that Bootstrap does have a CSS for aligning all rules, we adjusted the padding for the [172] Of Course, You Can Build a Web App! However, there’s much more to finding the perfect alignment between icons and text. Thankfully, there are a few universal tips we can put to use to ensure our icons always line up beautifully with text. Tip 1: Decide on an icon format and stick to it. I take for granted that there are other ways to do icons other than SVG.


Icons by Glyphicons, Easily realign text to components with text alignment classes. Left aligned text. Use .pull-right for a floated, right-aligned blockquote. Faucibus porta lacus fringilla vel; Aenean sit amet erat nunc; Eget porttitor lorem. <ul>; <li></li>; </ul> Option two can be something else and selecting it will deselect option one. I want to align the list items horizontally. But i'm not getting them in a line. If i remove the br tag inside the first li then its aligning perfectly. What am i missing? please help. jsfiddle cod


Components · Bootstrap, Bootstrap assumes icon font files will be located in the . Dropdown menus can be changed to expand upwards (instead of downwards) Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu. class="btn btn-default">2</button> <div class="btn-group" role="​group">  Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.


Navbar, Inside a recommended container div, there are 2 main parts of the navbar. To right align your navbar links, just add a right class to your <ul> that contains them. class="right hide-on-med-and-down"> <li><a href="sass.html">Sass</a></li> <​li><a class="material-icons">menu</i></a> <ul id="nav-mobile" class="right  I am displaying number of boxes in a row with fix height and width, generated from &lt;li&gt; tags. now I need to align the text in the vertical center. The CSS vertical-align has no impact, mayb