Как разместить компоненты в одну строку / блок?

Question

Мне нужно расположить оповещения на одну строку кнопками. Они появляются в разных ситуациях (состояниях), но даже при этом они появляются не более чем в 1 раз. Просто нужно показать их в одну строку с помощью кнопки «Отправить». не помогает.

Спасибо за любую помощь.

Это мой код:

      <Form.Group className="m-0">
        <Form.Control>
// starting here
        <Button>
          {isLoading ? 'Sending...' : 'Send feedback'}
        </Button>
        {isLoading && showTimer && (
          <CancelButton         )}
        {tooShortFeedback && !isLoading && (
          <WarningAlert message="Your feedback must be more than 10 symbols" />
        )}
        {attemptCount && (
          <DangerAlert message={tooLong} />
        )}
        {tooLongFeedback && !attemptCount && (
          <WarningAlert message={tooLong} />
        )}
        {feedbackNotSent && !isLoading && (
          <DangerAlert message="Your feedback was not sent. Try again" />
        )}
// finishing here
      </Form.Group>

Вот схема, как это выглядит сейчас:

Кнопка

Предупреждение

И вот что мне нужно: Кнопка предупреждения

Answer 1

Чтобы получить все в одной строке, вы можете использовать display:flex

https://www.w3schools.com/css/css3_flexbox.asp

    <div style={{display:'flex'}}>
        <Button>
          {isLoading ? 'Sending...' : 'Send feedback'}
        </Button>
        {isLoading && showTimer && (
          <CancelButton         )}
        {tooShortFeedback && !isLoading && (
          <WarningAlert message="Your feedback must be more than 10 symbols" />
        )}
        {attemptCount && (
          <DangerAlert message={tooLong} />
        )}
        {tooLongFeedback && !attemptCount && (
          <WarningAlert message={tooLong} />
        )}
        {feedbackNotSent && !isLoading && (
          <DangerAlert message="Your feedback was not sent. Try again" />
        )}
    </div>

Answer 2

Как упомянуто @CaptainMhmdrz_A в комментариях. Вам необходимо обновить CSS этих кнопок. От display:block до display:inline-block или display:inline