To showcase them side by side, you can incorporate the display: flex property to the categories div, like so:
#categories{
display: flex;
-webkit-column-count: 4;-moz-column-count: 4;column-count: 4;
-webkit-column-gap:1em;-moz-column-gap:1em;column-gap: 1em;
}
The default behavior of flex is to exhibit items in a row (i.e., horizontally).
For more details, refer to this link: https://developer.mozilla.org/en-US/docs/Web/CSS/flex
Edit:
Utilizing grid might be a better fit for your issue. If you attempt the following approach, it should function correctly:
#categories{
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
-webkit-column-gap:1em;
-moz-column-gap:1em;
column-gap: 1em;
display: grid;
grid-template-rows: repeat(auto-fit, minmax(80px, 1fr));
grid-auto-rows: 80px;
grid-auto-flow: dense;
}
.item{
display: inline-block;
margin: 0 0 1em;
padding:1em;
width: 100%;
border:3px solid #fff;
border-radius: 30px;
height:100px;
}
.item p{color:#59a3b6;text-align:center;font-weight:500;}
#categories .item:nth-child(1n+2){
height:200px;
grid-row: span 1;
grid-column: span 2;}
#categories .item:nth-child(2n){height:250px; grid-row: span 2; grid-column: span 1;}
#categories .item:nth-child(3n){
height:120px;
grid-row: span 4;
grid-column: span 4;
}
#categories .item:nth-child(4n){
height:140px;
grid-row: span 1;
grid-column: span 1;
}
#categories .item:nth-child(5n){
height:300px;
grid-row: span 3;
grid-column: span 6;
}
In essence, I introduced display: grid; to the parent element and applied
grid-row: span 1; grid-column: span 2;
to the child elements. You may need to experiment with it, but it should set you on the right path towards achieving your desired layout.
Watch this video for a comprehensive explanation of the concept.
I hope this guidance proves useful. Best of luck!