CODEWITHSUNDEEP
javascripthtmlcssreactjs
Priya
Priya

Reputation: 143

How to put space between horizontal input fields in css

I am working on a basic react project. I want to put space between 2 horizontal input fields ( without grid ). Anyhelp will be helpful as I am in learning phase.

The style I am using for fields

.grocery {
  padding: 0.25rem;
  padding-left: 1rem;
  background: var(--clr-grey-10);
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
  border-color: transparent;
  font-size: 1rem;
  flex: 1 0 auto;
  color: var(--clr-grey-5);
}

The react code snippet:

 <div className='form-control'>
        <input type='text' name='Principal'className='grocery' placeholder='principal amount' value={name} onChange={(e)=>setName(e.target.value)}/>
        <button type='submit' className ='submit-btn'>
          {isEditing ? 'edit' :'submit'}
        </button>
        <input type='text' name='cash inflow'className='grocery' placeholder='cash inflow' value={name} onChange={(e)=>setName(e.target.value)}/>
        <button type='submit' className ='submit-btn'>
          {isEditing ? 'edit' :'submit'}
        </button>
      </div>

The two input fields between where I want to put space

Upvotes: 1

Views: 4539

Answers (4)

Ali Shefaee
Ali Shefaee

Reputation: 362

.form-control {
  background-color: teal;
  display: flex;
  **justify-content: space-between;**
}

.grocery {
  padding: 0.25rem;
  padding-left: 1rem;
  background: white;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-color: transparent;
  font-size: 1rem;
  color: black;
}

<div class='form-control'>
  <div class="container">
     <input type='text' name='Principal' class='grocery' placeholder='principal amount' />
     <button type='submit' className ='submit-btn'>submit</button>
  </div>
  <div class="container">
    <input type='text' name='cash inflow' class='grocery' placeholder='cash inflow'/>
    <button type='submit' className ='submit-btn'>submit</button>
  </div>
</div>

Upvotes: 0

Aizaz Malik
Aizaz Malik

Reputation: 11

You can write

&nbsp;

between both elements in the HTML to get the space quickly. However, a better approach would be to add margin-right as explained by @TechySharnav.

Upvotes: 0

lupz
lupz

Reputation: 3638

You should wrap your elements in container elements to do this and keep the button and input together.

.form-control {
  background-color: teal;
  display: flex;
}

.container {
  padding: 1em;
}

.grocery {
  padding: 0.25rem;
  padding-left: 1rem;
  background: white;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-color: transparent;
  font-size: 1rem;
  color: black;
}
<div class='form-control'>
  <div class="container">
     <input type='text' name='Principal' class='grocery' placeholder='principal amount' />
     <button type='submit' className ='submit-btn'>submit</button>
  </div>
  <div class="container">
    <input type='text' name='cash inflow' class='grocery' placeholder='cash inflow'/>
    <button type='submit' className ='submit-btn'>submit</button>
  </div>
</div>

Here I added 2 container divs with a padding of 1em and set display-property of the .form-control div to flex.

Upvotes: 0

TechySharnav
TechySharnav

Reputation: 5084

You can add margin-right to .submit-btn. This will make sure, the button and input will stay together.
(Also, you can use :first-child for .submit-btn so that margin is only applied to the 1st button and not all.)

.grocery {
  padding: 0.25rem;
  padding-left: 1rem;
  background: #F1F5F8;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  border-color: transparent;
  font-size: 1rem;
  flex: 1 0 auto;
  color: #F1F5E4;
}

.submit-btn{
  margin-right: 25px; 
}
<div className='form-control'>
        <input type='text' name='Principal' class='grocery' placeholder='principal amount'>
        <button type='submit' class='submit-btn'>
          submit
        </button>
        <input type='text' name='cash inflow' class='grocery' placeholder='cash inflow'>
        <button type='submit' class='submit-btn'>
          submit
        </button>
      </div>

Upvotes: 2

Related Questions