In ReactJS, How to change a line between span elements in JSX?-CodePudding

I want to change a line after the 'text B'. This is a code of ReactJS.

<div>
          <span>Text A</span>
          <span>Text B</span>
          <span>Text C</span>
          <span>Text D</span>
          
</div>

The desired output:

 Text A Text B 
 Text C Text D

Output i am getting:

 Text A Text B Text C Text D

CodePudding user response：

<div>
      <span>Text A</span>
      <span>Text B</span>
      <br/>
      <span>Text C</span>
      <span>Text D</span>
      
</div>

CodePudding user response：

You can write it like this

.container {
  display: flex;
  flex-direction: column;
}

<div class="container">
  <div>
    <span>Text A</span>
    <span>Text B</span>
  </div>
  <div>
    <span>Text C</span>
    <span>Text D</span>
  </div>
</div>