CODEWITHSUNDEEP
cssreactjs
stackuser
stackuser

Reputation: 283

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

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.

Upvotes: 2

Views: 467

Answers (2)

Giorgi Gvimradze
Giorgi Gvimradze

Reputation: 2129

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>

Upvotes: 2

Kunal Tanwar
Kunal Tanwar

Reputation: 1291

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>

Upvotes: 1

Related Questions