Place one HTML input directly below another with HTML - html

Question

So I have a bunch of HTML elements I'm creating dynamically. I would really like the element "imageBox" to appear directly below the "mediaBox" instead of to the left of it like it is now. Here is my code right now:
var div = document.createElement("div");
//HTML code for each element to be added with each new checkpoint
var nameBox = "<b>Checkpoint " + markerId + ":</b> <input type='text' id=" + markerId + " placeholder='Checkpoint name'>"
var descBox = "<textarea rows='4' cols='35' placeholder='Checkpoint description' id=" + markerId + "desc style='vertical-align: top;'></textarea>"
var mediaBox = "<input type='text' id='media" + markerId + "' placeholder='paste URL to YouTube video' size='23'>"
var imageBox = "<input type='text' id='image" + markerId + "' placeholder='paste URL to image' size='23'>"
var removeButton = "<button type='button' value='Remove' id='remove" + markerId + "' onClick='remove_marker(" + markerId + ")'> Remove </button>"
var undoButton = "<button type='button' value='Undo' ' style='display: none;' id='undo" + markerId + "' onClick='remove_marker(" + markerId + ")'> Undo </button>"
var removeText = "<div id='removed" + markerId + "' style='display: none;'> Removed <button type='button' value='Undo' ' style='display: none;' id='undo" + markerId + "' onClick='undo_Remove(" + markerId + ")'> Undo </button> </div>"
div.innerHTML = nameBox + descBox + mediaBox + imageBox + removeButton + removeText;
I know it is really messy and ideally I should be using CSS but I'm not right now. It shows up on my page like this:
It would be great if the image URL box could be right under the YouTube one!
Thanks so much!

Answer 1

For minimal re-writing, you can try wrapping the two boxes in an unordered list. If you really truly want to avoid CSS, set an inline style to remove the bullets.
div.innerHTML = (nameBox
+ descBox
+ '<ul style="list-style: none;"><li>'
+ mediaBox + "</li><li>" + imageBox
+ "</li></ul>"
+ removeButton
+ removeText);
I just inserted the relevant bits into your last line. You really really should use document.createElement and div.appendChild to create these things.