'How can I properly wrap text in a div next to another div?

I'm trying to wrap text on smaller screens like this screenshot

enter image description here

but my actual result so far is the div only sticking to a new line, like this screenshot

enter image description here

My html

        <section class="alertBlurb">
          <div class="weeklyAlertBlurb">
            Text qm asq x zxcvbn vcxza qwert asdf qwertyu
          </div>
          <div class="waitlistBlurb">
            <a href="https://example.com">
              &nbsp;asdf uyt asdfghj qwe rerytxx zaqwsqwas
            </a>
          </div>
          <div class="attendBlurb">
            &nbsp;zxc textt qwe "a zxcv qa asdfgh qwerty" tyh.
          </div>
        </section>

& css

  .weeklyAlertBlurb {
    font-weight: bold;
    font-size: 1.2em;
  }
  .waitlistBlurb {
    font-size: 1.2em;
  }
    @media (max-width: 428px) {
        .waitlistBlurb {
      margin-left: -0.25em;
      }
    }
  .attendBlurb {
    font-size: 1.2em;
  }
    @media (max-width: 428px) {
        .attendBlurb {
      margin-left: -0.25em;
      }
    }
  section.alertBlurb {
    z-index: 1;
    margin-bottom: -5em;
    display: flex;
    flex-wrap: wrap;
  }

I've tried different things like word-wrap: break-word; with no success. I'm wondering if I need to redo my markup structure?

htmlcss


Solution 1:[1]

div tag is a block-level tag, it, of course, starts in a new line, so instead use span tag,

<span class="attendBlurb">
            &nbsp;zxc textt qwe "a zxcv qa asdfgh qwerty" tyh.
          </span>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Madhan1021

Related Questions