Utilize the CSS property `float:left` to position consecutive `div`s side by side.
Alternatively, consider implementing Bootstrap's grid system for a more organized layout -> https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
Give this approach a try.
View a working example on Codepen: -> https://codepen.io/anon/pen/VEXKJe
$(document).on('click', '.phase_button', function (e) {
e.preventDefault();
$('.paste_row_button').append('<button class="row_button">Rows-' + ++$(".row_button").length + '</button>');
$('.phase-container').append($(".structure").clone().removeClass("structure hide"));
});
$(document).on("click", ".row_button", function () {
$(".phase").eq($(".row_button").index($(this))).css({"display": "flex", "border-left": "1px solid #ddd", "border-right": "1px solid #ddd"}).find(".type-container").append($(".structure .type").clone());
});
$(document).on("click", ".week_button", function () {
console.log($(".phase-header-1 .week:first").clone());
$(".phase-header-1 .week-container").append($(".phase-header-1 .week:first").clone());
$(".phase-header-2 .week-container").append($(".phase-header-2 .week:first").clone());
$(".phase-header-3 .week-container").append($(".phase-header-3 .week:first").clone());
$(".phase").find(".week-container").append($(".structure .week:first").clone());
});
$(".phase_button").click();
* {
margin: 0px;
padding: 0px;
}
.week .day{float:left;}
.week .day .reps{float:left;}
.phase-name {
display: inline-block;
width: 80px;
text-align: center;
padding: 7px;
vertical-align: top;
}
.type-container {
display: inline-block;
}
....(CSS code continued)
Hope this guidance proves beneficial.