How do I get rid of this extra space below this column when using bootstrap 5?

Question

I made the changes as you described but when I check to see how it would look on the phone the blue box and the pink box are separated which I want to be together. I have attached a screenshot of how it looks and I want it to look similar to the desktop version.

I am not sure which entity might be causing this issue.

--EDIT--

Just to provide more clarity here is a screenshot of how the container_tag and container_box should look in the mobile screen (365px). Should look like this

Is looking like this

.side_feedback{
    background-color: pink;
    padding: 10px;
    height: 300px;
    width: 180px;
    border-radius: 10%;
    margin-left: 17px;
}
.container_tag{
    background-color: royalblue;
    min-height: 200px;
    max-width: 2rem;
    border: 6px solid royalblue;
    float: left;
}
.tag{
    transform: rotate(-90deg);
    position: relative;
    top: 8rem;
}
.container_box{
    background-color: pink;
    min-height: 200px;
    border-left: 6px solid white;
    width: 95%;
    position: relative;
    float: left;
}

<div class="container-fluid">
        <div class="row mb-4 g-5">
            <div class="order-2 order-sm-1 col-lg-2 col-md-2 col-xs-10">
                <div class="col-md">
                    <div class="side_feedback">
                        <p>Give us feedback!</p>

                    </div>
                </div>
            </div>
            <div class="order-1 order-sm-2 col-10">
                <div class="row row-cols-1 row-cols-sm-1 row-cols-md-1 row-cols-lg-1 row-cols-auto g-4">
                    <div class="col-12">
                        <div class="container_tag">
                            <h3 class="tag">TEXT</h3>
                        </div>
                        <div class="container_box">
                        </div>
                    </div> 
                    <div class="col-12"> 
                        <div class="container_tag">
                            <h3 class="tag">TEXT</h3>
                        </div>
                        <div class="container_box">
                            
                        </div>    
                    </div> 
                    <div class="col-12"> 
                        <div class="container_tag">
                            <h3 class="tag">TEXT</h3>
                        </div>
                        <div class="container_box">
                            
                        </div>    
                    </div> 
                </div>
            </div>
        </div>

Answer 1

If you’re referencing the large vertical white space below the two pink blocks, that’s there because you’re using position: relative on the pink container_box. position: relative positions the element normally (below your container_tag div) and then moves the element to the new position — the original space remains.

To get rid of the white space, add float: left to the styles for both of your containers.

.container_tag {
    background-color: royalblue;
    min-height: 180px;
    width: 9%;
    max-width: 3.2rem;
    float: left;
    position: relative;
}

.tag {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(-90deg)
}

.container_box {
    background-color: pink;
    min-height: 180px;
    border-left: 6px solid white;
    width: 91%;
    position: relative;
    float: left;
}

@media (min-width:768px) {
    .container_box {
        width: calc(100% - 3.2rem);
    }
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-12 col-sm-10 px-0">
            <div class="row gx-0">
                <div class="col-12 mb-3">
                    <div class="container_tag">
                        <h3 class="tag">Text</h3>
                    </div>
                    <div class="container_box">
                    </div>
                </div>
                <div class="col-12 mb-3">
                    <div class="container_tag">
                        <h3 class="tag">Text</h3>
                    </div>
                    <div class="container_box">

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

One other note - you don't need to give the same column class for different breakpoints (col-lg-10 col-md-10 col-xs-10). Just use col-10 and that will apply to all of the following breakpoints. And BS-5 doesn't use xs - that was for Bootstrap 3.