Выполнение текстового показа на правой стороне div

Question

Here это скрипка. Я делаю веб-приложение для веб-магазина, и когда вы нажимаете кнопку, у него появляется флажок и то, что вы хотите. Я хотел создать свои флажки, поэтому я сделал свой собственный. Но когда я устанавливаю флажок, текст, который идет с ним, появляется в нижней части div.

P.S. Коды - это целые разделы.

HTML (весь, а не только флажок):

<div id='top'>Kitchen List</div> 
<br /> 
<input type='text' id='input'><button id='click'>Add</button> 
<ol> 

</ol> 
<div id='error'>Please enter a grocery item<br /><button id='eb'>Close</button></div> 

CSS:

body { 
    margin: 0; 
    padding: 0; 
    background: #252525; 
    color: #96f226 
} 
#top { 
    width: 100%; 
    height: 40px; 
    background: #96f226; 
    text-align: center; 
    font-size: 30px; 
    color: #252525; 
} 
#input { 
    background: #4a4a4a; 
    border: 1px solid #454545; 
    color: #96f226; 
} 
#input:hover { 
    background: #656565; 
} 
#input:focus { 
    box-shadow: 0 0 30px #96f226 
} 
#click { 
    background: #4a4a4a; 
    border: 1px solid #454545; 
    border-radius: 0; 
    color: #96f226; 
    cursor: pointer; 
} 
#click:hover { 
    background: #656565; 
} 
#click:active { 
    box-shadow: 0 0 30px #96f226; 
} 
#error { 
    height: 55px; 
    width: 100%; 
    background: red; 
    text-align: center; 
    font-size: 23px; 
    color: orange; 
} 
#eb { 
    background: orange; 
    color: red; 
    border-radius: 0; 
    border: 0; 
    cursor: pointer 
} 
#eb:hover { 
    background: #e59400; 
} 
#eb:active { 
    box-shadow: 0 0 30px #e59400; 
} 
.check { 
    width: 15px; 
    height: 15px; 
    background: #4a4a4a; 
} 

JS/JQuery:

$(document).ready(function(){ 
    $('#error').hide(); 
    $('#click').click(function(){ 
     var i = $('#input').val(); 
     if (i != "") { 
      $('ol').prepend('<div class="check"></div> ' + i + '<br /><br />'); 
     } 
     else { 
      $('#error').show(); 
      $('#eb').click(function(){ 
       $('#error').hide(); 
      }); 
     } 
    }); 
}); 

Answer 1

Поместите свой текст (i) в DIV и установить оба div для отображения: inline-block.

$(document).ready(function(){ 
$('#error').hide(); 
$('#click').click(function(){ 
    var i = $('#input').val(); 
    if (i != "") { 
     $('ol').prepend('<div class="check" style="display:inline-block"></div> <div style="display:inline-block">' + i + '</div><br /><br />'); 
    } 
    else { 
     $('#error').show(); 
     $('#eb').click(function(){ 
      $('#error').hide(); 
     }); 
    } 
}); 
});