Как разместить два div рядом друг с другом внутри другого div, используя css?

Question

У меня есть имя метки и его значение в теге div, а в другом теге div я добавил кнопку. Я хочу, чтобы имя ярлыка, его значение и кнопка были в одной строке или строке. ниже моя машинопись кода и реагирует.

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'};
`;

С кодом выше, это выглядит так:

Может ли кто-нибудь помочь мне поставить название, значение и кнопку в одной строке ... что-то вроде ниже,

Counter value 0                       Button

Спасибо.

Answer 1

Вам просто нужно сказать родительскому div, как выложить своих детей. Я вижу, вы используете flex уже на кнопке. Просто используйте его на Wrapper

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

Вот пример этого вживую

Answer 2

try display: inline-block для дочерних элементов