I have a problem. I have text fields and select fields. However, these are of different lengths.

I would like to bring them all to one length. On the computer, however, they should only take up about 1/3 of the space and not the whole window.

How can I make the input fields and select fields the same length and only take up 1/3 of the space on the computer?

import React, { useState } from 'react'
import "./Simulation.scss"
import { useLocation } from 'react-router-dom';


function Simulation() {

    return (
        <>

            <section className="section has-text-justified has-text-centered">

                <input className="input mb-3" type="text" placeholder="Name" />
                <input className="input  mb-3" type="text" placeholder="Second Name" />
                <div className="control mb-3">
                    <div className="select">
                        <select>
                            <option>Interests</option>
                            <option value="natural_gas">Football</option>
                            <option value="oil">Gaming</option>
                            <option value="electric">Art</option>
                        </select>
                    </div>
                </div>
                <div className="field is-grouped">
                    <div className="control">
                        <button className="button is-link" onClick={() => calculation()}>Calculation</button>
                    </div>
                </div>


        </>
    )
}

export default Simulation

CodePudding user response：

You can use the css width property and add for your text and select fields :

style="width: calc(100vw / 3);"

CodePudding user response：

You can apply the below styles for achieving this. Ensure to wrap all the inputs inside a div container.

.input-wrapper {
  display: flex;
  flex-direction: column;
  width: 15rem; // this value can be adjusted to the required width
  gap: 0.5rem;
}

.select-dropdown {
  width: 100%;
}

 <div className="App">
      <div className="input-wrapper">
        <input className="input mb-3" type="text" placeholder="Name" />
        <input className="input  mb-3" type="text" placeholder="Second Name" />
        <div className="control mb-3">
          <div className="select">
            <select className="select-dropdown">
              <option>Interests</option>
              <option value="natural_gas">Football</option>
              <option value="oil">Gaming</option>
              <option value="electric">Art</option>
            </select>
          </div>
        </div>
      </div>
    </div>

Code Sandbox : https://codesandbox.io/s/great-bhaskara-y0kr92