Problems with set the text clickable

Question

I want to set the text next to the date and time. Like in the image below:

I'm trying coding like this, but not succeed:

JQuery:

var monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

function addComment(name1) {

     var container = $('#divComments');
     var inputs = container.find('label');
     var id = inputs.length + 1;

     var div = $('<div />', {
         class: 'CommentStyle'
     });

     $('<label />', {
         id: 'comment' + id,
         text: name1
     }).appendTo(div);

     var d = new Date();
     var $fulaDate = $('<div>'+d.getFullYear() + "-" + monthNames[d.getMonth()] + "-" + d.getDate() + "T" + d.getHours() + ":" + d.getMinutes() +'</div>').appendTo(div);

    var $edit = $('<p>'+ { class: 'edit' } + "Edit" +'</p>').appendTo(div);

    $('.edit').click(function () {
            alert('asdfasdfasfasef');

        });

     div.appendTo(container);

 }

 $('#submit').click(function () {
     addComment($('#comments').val());
     $('#comments').val("");
 });

I got this output:

As you can see I'm not able to get the edit text on a straight horizontal line.

Some idea to solve the problem?

Live Demo

Answer 1

The following needs correction:

var $edit = $('<p>'+ { class: 'edit' } + "Edit" +'</p>').appendTo(div);

I think you meant this:

var $edit = $('<p />', { class: 'edit', text: 'Edit' }).appendTo(div);

Answer 2

Try adding css: Demo

.CommentStyle {
    border: 2px solid black;
    border-radius: 4px;
    margin-bottom: 10px;
    overflow:hidden;
}
.floatleft {
    float:left;
}
p {
    margin:0
}