alignment of component using css-CodePudding

I want to put either fileselector same as dropdown list or dropdown as fileselector. I am OK for both. I mean they should be of same size and in alignment.

<div>
<Row>
            <div className="col-sm-5 text-left">
              Please select the language:{' '}
            </div>
            <div>
              <div className="col-sm-7  text-center">
                <select >
                  <option >
                    Please select the language from list
                  </option>    
                    <option key={ctr} value={ctr}>
                      {ctr}
                    </option>

                </select>
              </div>
            </div>
          </Row>

          <Row>
            <div className="col-sm-6 text-left">
              Please select the file to upload:
            </div>
            <div className="col-sm-5 text-center">
              <input
                type="file"
                accept=".json"
                className="form-control form-sm-control"
                name="file"
                required
              />
            </div>
          </Row>             
        </div>

actually I am not UI developer but I tried and struggled a lot to complete it. it is still not coming. Could you please help. I can use other libraries or plain css if you can suggest.

CodePudding user response：

Isn't the row in Boostrap a class? Like this:

<div >
    <div >
      One of three columns
    </div>
    <div >
      One of three columns
    </div>
    <div >
      One of three columns
    </div>
  </div>

https://getbootstrap.com/docs/5.1/layout/columns/

As mentioned above <Row> could be a React component you created, without more information it's tough to debug here.