Trying to Create Custom 2 Column Module for Website

[TaylorBeaven]

Hello there, I'm trying to create a custom module for my HubSpot website that has 2 columns next to one another. In the left column I was hoping to have a YouTube video embedded and in the right just some text. I've listed my HTML + Hubl code that's helped me separate the two sets of content but I'm lost with how to use CSS to make the content appear next to one another as it currently has Column 1 content over Column 2 content.

<div class="section-wrapper">
<div class="column-1">
{% inline_rich_text field="column_1" value="{{ module.column_1 }}" %}
</div>
<div class="column-2">
{% inline_rich_text field="column_2" value="{{ module.column_2 }}" %}
</div>
</div>

[miljkovicmisa · Accepted solution]

Hi @TaylorBeaven, one possible solution with css is to use flexbox, so it should look something like the following:

.section-wrapper {
    display: flex;
    flex-direction: row;
}

Moving on you should add some media queries to make sure everything is responsive. Here is a great resource on flexbox: 
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

If my answer was helpful please mark it as a solution.

[TaylorBeaven]

This is very helpful, thank you so much!