Making text show on right side of div

Question

Here is the fiddle. I am making a grocery list web app, and when you click the button, it comes up with a checkbox and what you want. I wanted to style my checkboxes, so I made my own. But when I make the checkbox, the text that goes with it appears at the bottom of the div.

P.S. The codes are the entire sections.

HTML (entire, not just the checkbox):

<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

Put your text (i) in a div and set both div's to display: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();
        });
    }
 });
});