css inline elements inside absolute box which is inside relative box

I'm a beginner in web development and I'm building my first interactive web page. I came across a specific problem and hope someone can help me. It is my first question, so I apologise in advance if I forgot to mention or post all information. And sory for the long code :) (I tried to remove everything unrelevant).

So... I want to display columns (class="column") inline, but they display one under the other. A possible problem may be asociated with the fact that columns are inside an absolute positioned box (class="menu" -> becomes class="active" when hovered over - look at JavaScript!) which is inside a relative box (class="category").

I made a JSFiddle: https://jsfiddle.net/Kokata/s5gjp8qz/3/

HTML:

<body>
    `<div id="filters">
        <h3>Categories</h3>
        <ul id="categories">
            <li class="category" id="one">
                <div class="menu">
                    <ul class="subcategories">
                        <li> Item 1 </li>
                        <li> Item 2 </li>
                        <li> Item 3 </li>
                    </ul>
                </div>
                <h4> Category 1 heading </h4>
            </li>
            <li class="category" id="two">
                <div class="menu">
                    <div class="column">
                        <h4> Column heading </h4>
                        <ul class="subcategories">
                            <li> Item 1 </li>
                            <li> Item 2 </li>
                            <li> Item 3 </li>
                        </ul>
                    </div>
                    <div class="column">
                        <h4> Second column </h4>
                        <ul class="subcategories">
                            <li> Item 1 </li>
                            <li> Item 2 </li>
                            <li> Item 3 </li>
                        </ul>
                    </div>
                </div>
                <h4> Category 2 heading </h4>
            </li>
        </ul>
    </div>`
</body>

CSS:

#filters {
    display: inline-block;
    float: left;}

h3 {
    width: 220px;
    background-color: black;
    color: white;
    padding: 3px 5px;
    margin: 0 0 2px 0;}

ul {
    list-style-type: none;
    padding: 0;
    margin: 2px 0;}

.category {
    position: relative;}

h4 {
    width: 220px;
    padding: 3px 5px;
    margin: 2px 0;}

.menu {
    display: none;}

.active {
    padding: 3px;
    border: 1px solid black;
    position: absolute;
    display: block;
    left: 230px;
    z-index: 10;}

.column {
    width: 120px;
    display: inline-block;
    vertical-align: top;}

JavaScript:

$(function(){

// OPEN AND CLOSE MENUS

$('.category').on('mouseover', function() {
    // When user moves over category...
    $(this).children('.menu').removeClass('menu').addClass('active');
    // remove class menu and add class active
});

$('.category').on('mouseout', function() {
    // When user moves down from category...
    $(this).children('.active').removeClass('active').addClass('menu');
    // remove class active and add class menu
    }); 
});

Solution

I'm not certain that this is what you are after, but have a look at this fork and see if it's what you're after.

Specifically, I changed the width of .column to a min-width, and added display: inline to .column ul li

.column {
    min-width: 120px;
    display: inline-block;
    vertical-align: top;}

.column ul li { display: inline; }

Alternatively, try adding a width of say 245px to your .active class in the css.