# Trying to Create Custom 2 Column Module for Website

**URL:** <https://community.hubspot.com/t/trying-to-create-custom-2-column-module-for-website/73851>\
**Category:** APIs & Integrations\
**Tags:** developer-tools\
**Created:** [January 26, 2023, 5:26pm UTC](https://community.hubspot.com/t/trying-to-create-custom-2-column-module-for-website/73851 "2023-01-26T17:26:00Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![TaylorBeaven](https://avatars.discourse-cdn.com/v4/letter/t/b5ac83/32.png) [@TaylorBeaven](https://community.hubspot.com/u/TaylorBeaven)\
**Post date:** [January 26, 2023, 5:26pm UTC](https://community.hubspot.com/t/trying-to-create-custom-2-column-module-for-website/73851/1 "2023-01-26T17:26:00Z")

</div>

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\>

---

<div class="post-metadata">

**Author:** ![miljkovicmisa](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/miljkovicmisa/32/86357_2.png) [@miljkovicmisa](https://community.hubspot.com/u/miljkovicmisa)\
**Post date:** [January 26, 2023, 6:11pm UTC](https://community.hubspot.com/t/trying-to-create-custom-2-column-module-for-website/73851/2 "2023-01-26T18:11:02Z")

</div>

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

```lia-code-sample
.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:

> **[A Complete Guide to CSS Flexbox | CSS-Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)**
>
> Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also...

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

---

<div class="post-metadata">

**Author:** ![TaylorBeaven](https://avatars.discourse-cdn.com/v4/letter/t/b5ac83/32.png) [@TaylorBeaven](https://community.hubspot.com/u/TaylorBeaven)\
**Post date:** [January 27, 2023, 6:06pm UTC](https://community.hubspot.com/t/trying-to-create-custom-2-column-module-for-website/73851/3 "2023-01-27T18:06:31Z")

</div>

This is very helpful, thank you so much!