How to adjust the divs?

Question

I need to move the paragraph div over to the left with it expanding all the way to the image. The top-div should display on two lines and break after the word festival. Both paragraphs should be to the left of the image. How do I get the div's to display correctly?

body {
  width: 8.5in;
}

.container {
  display: flex;
  background: red;
}

.top-div {
  display: table;
  background: rgb(204, 255, 102);
  text-align: center;
  font-size: 1.75em;
  font-weight: bold;
  color: rgb(35, 66, 113);
}

.top-div>p {
  margin: 10px;
}

.paragraph {
  align-self: flex-end;
  background: blue;
}

.flower-img {
  display: table;
  float: left;
}

<div class="container">
  <div class="top-div">
    <p lang="zh">Qingming Festival<br>qīng míng jié</p>
  </div>
  <div class="paragraph">
    <p>The Qingming or Ching Ming Festival, also known as Tomb-Sweeping Day in English, is a traditional Chinese festival on the first day of the fifth solar term of the traditional Chinese lunisolar calendar. This makes it the 15th day after the Spring
      Equinox, either 4 or 5 April in a given year. Other common translations include Chinese Memorial Day and Ancestors&#39; Day.</p>
    <p>It is also a time for people to go outside to enjoy the spring such as having a picnic or flying a kite. In 2017 Qingming Festival falls on April 4. The three-day public holiday in China is April 3–5, 2017.</p>
  </div>
  <div>
    <img src="//dummyimage.com/300x450" alt="flower" width="300" class="flower-img">
  </div>
</div>

This what I would like it to look like

Answer 1

Place your paragprah elements in a parent container with class content, then place this container in your div with class container. Afterwards apply css styling as follows

body {
  width: 10.5in;
}

.container {
  background: red;
}

.content {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: 0;
}

.top-div {
  background: rgb(204, 255, 102);
  text-align: center;
  font-size: 1.75em;
  font-weight: bold;
  color: rgb(35, 66, 113);
}

.top-div>p {
  margin: 0;
}

.paragraph {
  background: blue;
  height: 100%;
}

<div class="container">

  <div class="content">

    <div class="paragraph">
      <div class="top-div">
        <p lang="zh">Qingming Festival
          <br>qīng míng jié</p>
      </div>
      <p>The Qingming or Ching Ming Festival, also known as Tomb-Sweeping Day in English, is a traditional Chinese festival on the first day of the fifth solar term of the traditional Chinese lunisolar calendar. This makes it the 15th day after the Spring
        Equinox, either 4 or 5 April in a given year. Other common translations include Chinese Memorial Day and Ancestors&#39; Day.</p>
      <p>It is also a time for people to go outside to enjoy the spring such as having a picnic or flying a kite. In 2017 Qingming Festival falls on April 4. The three-day public holiday in China is April 3–5, 2017.</p>
    </div>
    <div>
      <img src="//dummyimage.com/300x450" alt="flower" width="300" class="flower-img">
    </div>
  </div>

</div>

Answer 2

Make the width property of the p element equal to 100%. This will render it across the entire screen. If that doesn't work, set the width of the div that contains the p element equal to 100% as well. Not sure what you want to do with the 'top-div'. If you're trying to center it, you can just do this:

       p {
             text-align: center;
          }