Выравнивание динамически созданного изображения в правой части div

Question

Я пытаюсь создать список покупок. Список динамически создается с помощью Javascript (JquerryUI). Я хочу, чтобы трэш-банки рядом с правой стороной (где эти синие точки, которые я рисую). Я попытался сделать это, используя left или style="right:350px" и float:right в теге, но это не сработало.

Вот мой код, где он генерируется строка:

var row=$('<div class"productsclass" id='+selectedproducts[i]+' style="width:400px"> 
<label style="font-size:20px">'+selectedproducts[i]+'</label><input type="text" 
name="Quantity" value="1" id='+thesi+'><img class=delete 
src="http://b.dryicons.com/images/icon_sets/handy_part_2_icons/png/128x128/recycle_bin.png" 
height="22" width="22" style="right:350px"></div>'); 
    rowID++; 

    $("#productstable").append(row); 

Вот HTML:

<div id="maindiv" class="maindiv"> 
<input id="autocomplete_text_field"> 
<button id="add_product_button">Add product</button> 
<form action="#" id="productstable" name="productstable"> 
<p></p> 
</form> 
</div> 
</body> 

и вот CSS:

#body{ 
    background-color: #6E0D25 
} 

#maindiv { 
    position:absolute; 
    top: 50%; 
    left: 50%; 
    width:30em; 
    height:18em; 
    margin-top: -9em; /*set to a negative number 1/2 of your height*/ 
    margin-left: -15em; /*set to a negative number 1/2 of your width*/ 
    /*border: 1px solid #ccc;*/ 
    background-color: #6E0D25; 
} 

#productstable 
{ 
    background-color:#F1EBE4; 
    border-radius:10px; 
    width:400px; 
} 

#product 
{ 
    width:380px; 
} 
#autocomplete_text_field 
{ 
    width:200px; 
    height:40px; 
    border-radius:10px; 

} 

#add_product_button 
{ 
    width:200px; 
    height:50px; 
    border-radius:10px; 
} 

Как мне это сделать? (Извините, если это очень бесполезный вопрос, это почти первый раз я использую CSS)

решаемые после ответа user2313440 в:

Answer 1

Изменение img class=delete к img class="delete" затем добавить float:right; к нему в CSS.

Answer 2

просто простая перегруппировка вашего img и использование float: right;

попробуйте этот код вместо:

var row=$(' <div class "productsclass" id='+selectedproducts[i]+' style="width:400px"> 
    <img class=deletesrc="http://b.dryicons.com/images/icon_sets/handy_part_2_icons/png/128x128/recycle_bin.png" height="22" width="22" style="float: right;"> 
<label style="font-size:20px">'+selectedproducts[i]+'</label> 
<input type="text" name="Quantity" value="1" id='+thesi+'> 
</div>'); 

rowID++; 

$("#productstable").append(row);