How to add space between in-line elements without using

Question

I have to add space between two input fields without using &nbsp. I have tried to also add {' '} but that made no difference

This is how they are rendered:

       return (
          <div className="side-by-side">
                <Input
                  style={{ marginRight: 100 }}
                  classname="flex w-49"
                  label="first name"
                  type="text"
                  placeholder="Enter first name..."
                  inputId="basicInput"
                  value={obj.firstName}                      
                ></Input>
                {'          '}
                <Input
                  classname="flex w-49"
                  label="last name"
                  type="text"
                  placeholder="Enter last name..."
                  inputId="basicInput"
                  value={obj.lastName}
                ></Input>
          </div>

And this is the css I'm using to get them in the same line

.side-by-side {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 4px; //also tried to add a margin but that didn't work
}

Even if I add the margin, it doesn't seem to make a difference — , Mar 04 '21 at 04:30

score 2 · Accepted Answer · answered Mar 04 '21 at 04:32

As you are putting margin-left on the side-by-side container it will but margin on the whole container when you just want margin on the right input.

A simple solution which isn't fully supported in all browsers yet is putting gap on the parent like this:

.side-by-side {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}

Gap very simply puts a gap between elements but like I said this isn't fully supported with early browsers so something else would be to use what's called "the lobotomized owl" which you can read about here.

In summary, it gets all children elements that have an immediate previous sibling which means it will get all children except for the first and is scalable if you want to add more inputs.

You can try doing this:

.side-by-side {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.side-by-side > * + *{
    margin-left: 4px;
}

score 1 · Answer 2 · answered Mar 04 '21 at 04:48

try adding Input in a separate div

<div className="side-by-side">
             <div style="margin-right:100px;">
                    <Input
                      style={{ marginRight: 100 }}
                      classname="flex w-49"
                      label="first name"
                      type="text"
                      placeholder="Enter first name..."
                      inputId="basicInput"
                      value={obj.firstName}                      
                    ></Input>
                </div>
                    {'          '}
                    <Input
                      classname="flex w-49"
                      label="last name"
                      type="text"
                      placeholder="Enter last name..."
                      inputId="basicInput"
                      value={obj.lastName}
                    ></Input>
              </div>

score 0 · Answer 3 · answered Mar 04 '21 at 04:32

In your example, you've given margin-left to parent div with class .side-by-side, whereas you need to provide it to input element.

Below is the snippet

.side-by-side {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.side-by-side > input:last-of-type{
  margin-left: 25px;
}

<div class="side-by-side">
  <input class="flex w-49" label="first name" type="text" placeholder="Enter first name..."></Input>
  <input class="flex w-49" label="last name" type="text" placeholder="Enter last name..."></Input>
</div>

How to add space between in-line elements without using

3 Answers3