如何将组件放在一行/块中？

Question

I need to situate alerts one one line with buttons. They appear in different situations (states), but even this they doesn't appear more than 1 in the same time. Just need to show them in one line with 'Send button'. doesn't help.

Thanks for any help.

This is my code:

      <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>

This is schema how it looks now:

Button

Alert

And this is what I need: Button Alert

Answer 1

As mentioned by @CaptainMhmdrz_A in the comments. You need to update the CSS of these buttons. From display:block to display:inline-block or display:inline

Answer 2

To get everything in one line you could use 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>