'How to put gallery on left and table on right in same line?

I want to put image gallery alongside table, as code below, but when run table appears below gallery and takes 100% width.

I need this all to be in one line split 50% gallery and 50% table. On the right there will always be 4 pictures and table will consist of no more than 6 columns and 6 rows.

I'm using only styles that are below.

table{
    width:50%;
    table-layout: fixed;
}

.tbl-content{
    height: 100%;
    overflow-x:auto;
    margin-top: 0px;
}
    
th{
    padding: 20px 15px;
    text-align: center;
    font-weight: 500;
    font-size: 12px;
}
    
td{
    padding: 15px;
    text-align: left;
    vertical-align:middle;
    font-size: 12px;
}
    
.container-gallery {
    display: flex;
    width: 50%;
    padding: 2% 1%;
    box-sizing: border-box;
    height: 70vh;
}
    
.box-gallery {
    flex: 1;
    overflow: hidden;
    margin: 0 2%;
    box-shadow: 0 20px 30px rgba(0,0,0,.1);
    line-height: 0;
 }
    
.box-gallery > img {
    width: 200%;
    height: 100%;
    object-fit: cover;
 }
    
.box-gallery > span {
    font-size: 3.8vh;
    display: block;
    text-align: center;
    height: 10vh;
    line-height: 2.6;
}
    
.box-gallery:hover { flex: 1 1 50%; }
.box-gallery:hover > img {
    width: 100%;
    height: 100%;
}
    
<section>
    <div class="container-gallery">
        <div class="box-gallery">
            <img src="xxxxxx">
        </div>
        <div class="box-gallery">
            <img src="xxxxxx.png">
        </div>
        <div class="box-gallery">
            <img src="xxxxxx.png">
        </div>
        <div class="box-gallery">
            <img src="xxxxxx.png">
        </div>
    </div>
    <div class="tbl-content">
        <table>
            <tbody>
                <tr>
                    <td>xxxxxx</td>
                    <td>xxxxxx</td>
                    <td rowspan="5"><a href="xxxxxx">xxxxxx</a></td>
                </tr>
                <tr>
                    <td>xxxxxx</td>
                    <td>xxxxxx</td>
                </tr>
                <tr>
                    <td>xxxxxx</td>
                    <td>xxxxxx</td>
                </tr>
                <tr>
                    <td>xxxxxx</td>
                    <td>xxxxxx</td>
                </tr>
                <tr>
                    <td>xxxxxx</td>
                    <td>xxxxxx</td>
                </tr>
            </tbody>
        </table>
    </div>
</section>
htmlcss


Solution 1:[1]

set section display to flex. This should place the image div and table div side by side.

section {
display: flex;
}

You may also want to set the display direction of your .container-gallery to column, so it would fit in properly into the available space.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Chukwuemeka

Related Questions