Style WooCommerce Product Search Widget - css

Question

I got this custom CSS code for the WooCommerce product search bar on the generatepress forums, thanks to David.
When I enter that custom CSS code, the search bar looks like this: https://i.stack.imgur.com/8CMdx.jpg
.woocommerce-product-search {
border-radius: 40px;
overflow: hidden;
display: flex;
flex-direction: row-reverse
}
.woocommerce-product-search input {
border-radius: 0 40px 40px 0;
border-left: 0
}
.woocommerce-product-search button:before {
content: "seach";
font-family: "Arial";
text-align: center;
display: inline-block;
font-size: 15px;
}
.woocommerce-product-search button {
font-size: 0px;
background-color: #fafafa;
color: #666666;
border: 1px solid #cccccc;
border-right: 0;
border-radius: 40px 0 0 40px;
}
I want the bar to stay that way but with the "search" button on the right side, like this: https://i.stack.imgur.com/FaOMt.jpg
Please, could you help me to do it? I would appreciate it very much.
---EDIT 12/11/2020---
HTML:
<div class="woocommerce widget_product_search"><form role="search" method="get" class="woocommerce-product-search" action="https://example.com/">
<label class="screen-reader-text" for="woocommerce-product-search-field-0">Search for:</label>
<input type="search" id="woocommerce-product-search-field-0" class="search-field" placeholder="Search products…" value="" name="s" />
<button type="submit" value="Search">Search</button>
<input type="hidden" name="post_type" value="product" />
</form>
</div>

Answer 1

Not sure that this will solve the issue without seeing the html, but give it a try:
.woocommerce-product-search {
border-radius: 40px;
overflow: hidden;
display: flex;
flex-direction: row;
}