How to return align items one after other in a div using css and react?

user_16104900 0
Viewed 158

code is like below,

const renderInfo = () => {
    return (
        <>
            <div>Name</div>
            <div>Name1</div>
            <div>Type</div>
            <div>Type1</div>
        </>
    );
};

I want it to display like below,

enter image description here

but is currently shown like this with above code enter image description here

Could someone help me fix this alignment. thanks.

reactjs css
2 Answers

Or you can have styles inside div like so:

<div style={{ display: "block" }}>
  <div>Name</div>
  <div>Name1</div>
  <div>Type</div>
  <div>Type1</div>
</div>
user_43075340

Wrap it inside a container after that you can use flexbox, display: block etc.

Using Flexbox 

.container {
  display: flex;
  flex-direction: column;
}
<div class="container">
  <div>Name</div>
  <div>Name1</div>
  <div>Type</div>
  <div>Type1</div>
</div>

Using display: block

.container {
  display: block;
}
<div class="container">
  <div>Name</div>
  <div>Name1</div>
  <div>Type</div>
  <div>Type1</div>
</div>

user_157482780
Related