align 3 input fields side by side Materialize.css

Question

I'm using materialize.css and I have 2 input fields and one range, i want them all to be side by side. I managed to get the two input fields on the same line, but the range one is stacked. here is my code

<div className="container">
            <div className="row">
                <div className="input-field col s12 m6">
                    <select>
                        <option value="" disabled selected>Choose your option</option>
                        <option value="1">Option 1</option>
                        <option value="2">Option 2</option>
                        <option value="3">Option 3</option>
                    </select>
                </div>
                <div className="input-field col s12 m6">
                    <select>
                        <option value="" disabled selected>Choose your option</option>
                        <option value="1" className="left">Option 1</option>
                        <option value="2" className="left">Option 2</option>
                        <option value="3" className="left">Option 3</option>
                    </select>
                </div>
                <div className="col s12 m6">
                    <div className="range-field col s12 m6">
                        <input type="range" id="test5" min="0" max="100"/>
                    </div>
                </div>
            </div>
        </div>

please assist thanks !!

Answer 1

You use a 12 column layout and set the width of each div to m6 which means 6 columns on medium screens.

You will have you use m4 because 12 / 3 = 4

More info: https://materializecss.com/grid.html