Как отформатировать контент, динамически загружаемый с Jquery рядом с контентом, загруженным при начальной загрузке

Question

Я пытаюсь разместить контент, полученный с сервера, рядом с контентом, немедленно загруженным в дом. Это должно выглядеть так:

My code is below

Index.HTML:

  Категория  Бюджет  Активность  В наличии      

Сайт. Js

$(document).ready(function () {
$.ajax({
    url: "https://localhost:5002/api/task",

    type: 'get',
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: function (data) {
        console.log(data);
        var table = $("#CategoryTable tbody");
    
        $.each(data, function (idx, elem) {

            $("#Categories").append( "" + elem.typeName + ""  );

            var $tr = $('<tr>').append(
                $('<td>').html(
                    "<input class=form-check input type=checkbox  id=amountAllocated>" + "<div id=txtAmountAlloocated>" + elem.amountAllocated + "</div>")

            )
                $tr.appendTo('#CategoryTable');           
        });
    },

Css

#amountAllocated {
    display: inline-block;
    margin-right:2px;
}
#txtAmountAlloocated {
    display: inline-block;
   
}
#categorylist{
    display:inline-block;
}
#Categories {
    margin-left: 5%;
    margin-top: 5%;
    font-size: 16px;
}
#CategoryTable{

    margin-left: 15%;
}

Вот как это выглядит в настоящее время после свертывания bootstrap сворачиваемого div введите описание изображения здесь