Untitled

<Group width="9,2">
                <Textbox
                    name="question"
                    className="w-100 ux-rfi-search-bar"
                    model="searchRFI.search"
                    appendIcon="search"
                    placeholder="Search"></Textbox>
                <Button
                    id="submit-btn"
                    className="ux-rfi-green-button mt-4"
                    click={handleSearchRFI}
                    labelKey="search_btn"></Button>
            </Group>


CSS: 
.ux-rfi-search-bar{
    .ux-input-group{
    @extend .ux-input-group-text !optional;
    border: 1px solid black !important;
    box-shadow: 2px 2px 6px 0px rgba(4, 4, 4, 0.25) !important;
    }
    .ux-form-control{
        @extend .ux-form-control !optional;
        border: none !important; 
        box-shadow: none !important; 
    }
    .ux-input-group-append{
        background:#F3F3F3;
    }
}
.ux-rfi-green-button{
    @extend .ux-btn-secondary;
    background-color:#86bc25 !important;
    font-family: sans-serif !important;
    border: none;
    color: white !important;
    font-size: 0.9rem !important;
    border-radius: 2px;
}


This is the code for the search bar and the search button, add Bootstrap classes or CSS as required so that in mobile view, that is 320*270, it should be down one below the other. For example, in mobile view the search bar is on top and the button below the bar. no changes should be made in any other layout.