Best way to wrap body to not overlap sidebar?

ux
1

This is the product I have ATM:

I am trying to prevent the content from overlapping the side-bar.

Not sure how I can do that when I’m not able to add “non ending html tags” to one of my custom templates, then ending it on the next template.

2

For my 2048 theme, I make the main body compacted. It’s something like this:

Example Code 
<div class="sidebar">
  
  <p>Code goes here<p>
  
</div>
{{plugin-outlet
  name="before-topic-list-body"
  args=(hash
    topics=topics
    selected=selected
    bulkSelectEnabled=bulkSelectEnabled
    lastVisitedTopic=lastVisitedTopic
    discoveryList=discoveryList
    hideCategory=hideCategory)
  tagName=""
  connectorTagName=""}}
<tbody>
    {{raw "topic-list-header"
      canBulkSelect=canBulkSelect
      toggleInTitle=toggleInTitle
      hideCategory=hideCategory
      showPosters=showPosters
      showLikes=showLikes
      showOpLikes=showOpLikes
      showParticipants=showParticipants
      order=order
      ascending=ascending
      sortable=sortable
      listTitle=listTitle
      bulkSelectEnabled=bulkSelectEnabled}}
  {{#each filteredTopics as |topic|}}
    {{topic-list-item topic=topic
                      bulkSelectEnabled=bulkSelectEnabled
                      showTopicPostBadges=showTopicPostBadges
                      hideCategory=hideCategory
                      showPosters=showPosters
                      showParticipants=showParticipants
                      showLikes=showLikes
                      showOpLikes=showOpLikes
                      expandGloballyPinned=expandGloballyPinned
                      expandAllPinned=expandAllPinned
                      lastVisitedTopic=lastVisitedTopic
                      selected=selected
                      tagsForUser=tagsForUser}}
    {{raw "list/visited-line" lastVisitedTopic=lastVisitedTopic topic=topic}}
  {{/each}}
</tbody>
</script>
CSS 
@import "common/foundation/variables";

.sidebar {
  background: $secondary-high;
  padding: 0 ?em;
  .card {
  background: $whatever;
  height: ?px
  width: ?px;
  padding: ?em;
  margin: ?em 0;
  box-sizing: border-box;
  }
}

table.topic-list {
  display: flex;
}