How to make WooCommerce tabs align horizontally on mobile devices

We use WooCommerce. It shows description & review tab one after another in mobile view.
I want both tabs in one line.
this is shown in our website(mobile view) tabs one after another

we want this output

We checked the WooCommerce plugin setting, but have not been able to solve the issue.

This is common responsive behavior for the tabs on mobile view. It's ideal if you have multiple tabs on a product page.

You can change this with CSS, and I will give you two examples. The first one is the easiest using float, but not the best in terms of layout. But it will get the job done.
The second is correct one in terms of layout using flexbox which was made to make it easier to design flexible responsive layout structure without using float or positioning.

Please note! Below examples are based on a WooCommerce Demo store using the Storefront theme: https://themes.woocommerce.com/storefront/. This is important to remember if you use below CSS codes. They may not work on your own store, and will need tweaks /adjustments.

EXAMPLE 1: Below code is an example on how to use float:

/* Make description tabs on product page horizontally align on mobile device using float */
@media screen and (max-width: 768px) {
	.woocommerce-tabs ul.tabs li {
        width:50%;
		float: left;
	}
}

Explanation

Below line tells the browser to only apply the styling on devices with a screen width of maximum 768 pixels. A very standard number. You can change accordingly to your needs.

@media screen and (max-width: 768px)

Below line is defining which class we are targeting, by inspecting the element in the browser. It can look different depending on which theme you use. Below example is taken from a basic Woocommerce/Storefront store:

.woocommerce-tabs ul.tabs li /* li is each tab */

The rest is the styling itself. Since you have 2 tabs only, you can give each tab a width of 50% of the screen width. Then use float: left; property to specify that each tab should float to the left of its container

    width:50%;
	float: left;

Caution when using float

Please note that float is not really meant for layouts. So don't start using floats to lay out entire web pages. Floats by design were created to allow flowing text around an image (wrapping text and block level elements).

EXAMPLE 2 Below code is an example on how to use display: flex:

/* Make description tabs on product page horizontally align on mobile device using flex */
@media screen and (max-width: 768px) {
	.woocommerce-tabs ul.tabs {
		display: flex;
	}
	.woocommerce-tabs ul.tabs li {
        -ms-flex: 1; /* IE 10 */
		flex: 1;
	}
}

Explanation

In the line below, we are first targeting the parent element class, which contains all the tabs. We use the CSS Flexbox Layout Module and make it a flex container.

.woocommerce-tabs ul.tabs {
    display: flex;
}

We then target each tab, then use the flex property with the value set to flex: 1;, to let all the flexible items be the same length, regardless of its content.

	.woocommerce-tabs ul.tabs li {
        -ms-flex: 1; /* IE 10 */
		flex: 1;
	}

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning. It is one of the newer css "tools" which also means that older browser might not support it. Today most modern browsers support flexbox.