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

Question

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,

but is currently shown like this with above code

Could someone help me fix this alignment. thanks.

Did you try to fix it? You're expected to at least try then come back with questions about issues if you have them. — StudioTime
– StudioTime, Commented Aug 17, 2021 at 13:45
Does this answer your question? React and Flex layout how to use them — poPaTheGuru
– poPaTheGuru, Commented Aug 17, 2021 at 13:46

Giorgi Gvimradze · Accepted Answer · 2021-08-17 14:58:07Z

2

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>

answered Aug 17, 2021 at 14:58

Giorgi Gvimradze

2,2291 gold badge23 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kunal Tanwar · Accepted Answer · 2021-08-17 13:46:18Z

1

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>

answered Aug 17, 2021 at 13:46

Kunal Tanwar

1,2991 gold badge13 silver badges32 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related