How to place two divs next to each other within another div using css?

Question

I have a labelname and its value within div tag and in another div tag, I have added a button. I want the labelname, its value and the button to be in the same line or row. below is my code typescript and react.

render = () => {
    return (
        <Wrapper>
          <Count>
          <SpanComponent>
            Counter value
          </LabelComponent>
          <SpanComponent
            color={
              counter === 0
                ? 'red'
                : counter === 1
                ? 'blue'
                : 'green'
            }
          >
            {' '}
            {counter}
          </SpanComponent>
          </Count>
          <ButtonWrapper>
            <Button>
              Button
            </Button>
          </ButtonWrapper>
        </Wrapper>

    )
}

const ButtonWrapper = styled.div`
    display: flex;
    justify-content: flex-end;

`;

const LabelComponent = styled.span<Props>`
    margin: 0;
    padding: 0;
    line-height: ${props => props.lineh || 1.5};
    text-align: ${props => props.align || 'initial'};
`;

With the above code, it looks like below,

Could someone help me put the labelname, value and the button in the same line... something like below,

Counter value 0                       Button

Thanks.

flexbox would be a good usage here. for `Wrapper` put in `display: flex;` and `align-items: space-between;` — John Ruddell, Apr 17 '20 at 05:51
You could put them in a Flex box, the default of `display: flex` is a row container. Try making them inline elements or a few different things to center evenly. Let us know your attempts! — Tanner Dolby, Apr 17 '20 at 05:52
^ ammendment to my previous comment its `justify-content` not `align-items` I still mix those up from time to time :D. see my answer for more details — John Ruddell, Apr 17 '20 at 06:01
Does this answer your question? [How to place two divs next to each other?](https://stackoverflow.com/questions/5803023/how-to-place-two-divs-next-to-each-other) — Rob, Apr 17 '20 at 10:29

score 0 · Answer 1 · answered Apr 17 '20 at 05:52

0

try display: inline-block for the child elements

answered Apr 17 '20 at 05:52

user3842413

176
1
9

John Ruddell · Accepted Answer · 2020-04-17T05:59:47.983

0

You just need to tell the parent div how to lay its children out. I see you are using flex already on the button. Just use it on Wrapper

Const Wrapper = styled.div`
  display: flex;
  justify-content: space-between;
  /* ... rest of your styles here */
`

Here's an example of it live

edited Apr 17 '20 at 05:59

answered Apr 17 '20 at 05:54

John Ruddell

25,283
6
57
86

How to place two divs next to each other within another div using css?

2 Answers2