[FIXED] Why is my span element in a react component printing on a new line and not inline?

Issue

I have a react component and I am trying to place the input boxes to the right of the calendar.

class PayrollComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      val: 0,
    };
  }

  componentDidUpdate() {
    const inputElement = document.createElement("input");
    inputElement.setAttribute("type", "time");
    inputElement.setAttribute("className", "test");
    inputElement.style.margin = "10px";

    const inputContainer = document.getElementById("inputContainer");
    const br = document.createElement("br");
    // const textNode = document.createTextNode(" ");

    inputContainer.appendChild(inputElement);
    inputContainer.appendChild(inputElement);
    // inputContainer.appendChild(textNode);

    if ((this.state.val % 2 === 0) | (this.state.val === 2)) {
      inputContainer.appendChild(br);
    }
    console.log("Component updates by this many times: " + this.state.val);
  }

  render() {
    return (
      <div>
        <span>
          <CalendarComponent className="test" daysSelected={(days) => this.setState({ val: days + 1 })} /> <div id="inputContainer"></div>
        </span>
        <span>
          <div id="inputContainer" className="test"></div>
        </span>
        <p> {this.state.val} </p>
      </div>
    );
  }
}

export default PayrollComponent;

I put two span elements next to each other in react but they don't appear that way in the dom. I thought this would put the calendar and input boxes in line with one another? I have attached a screenshot showing.

I tried wrapping my calendar component and input container in span tags thinking this would have them inline

Solution

First of all, any element's display CSS property determines how it will be laid out. <span> and <div> have appropriate defaults, but they could be changed. No telling from your sample if they are. But even assuming they are not, you have not said what <CalendarComponent> is. If it is a block-level element, it does not matter if it is inside a span, it gets its own block. Changing its display to something else (e.g. inline-block) might help. See:

<section>
  <span>
    side
  </span>
  <span>
    by
  </span>
  <span>
    side
  </span>
</section>

<hr>

<section>
  <span>
    <div>NOT side</div>
  </span>
  <span>
    by
  </span>
  <span>
    side
  </span>

<hr>

<section>
  <span>
    <div style="display: inline-block">IS side</div>
  </span>
  <span>
    by
  </span>
  <span>
    side
  </span>
</section>

Answered By - Amadan
Answer Checked By - - Cary Denson (ReactFix Admin)