title: the second div gets included in the first div even though they are different and flex box not working
body: <pre><code>&lt;section class="third-part"&gt;
  &lt;div class="first"&gt;
  &lt;h2&gt;PHILOSOPHY&lt;/h2&gt;
  &lt;p&gt;Following the ideas of the Old Academy, Zeno divided philosophy into three parts: logic (a wide subject including rhetoric, grammar, and the theories of perception and thought); physics (not just science, but the divine nature of the universe as well); and ethics, the end goal of which was to achieve eudaimonia through the right way of living according to Nature. 
      &lt;br&gt; &lt;br&gt;In his treatment of Logic, Zeno was influenced by Stilpo and the other Megarians. Zeno urged the need to lay down a basis for Logic because the wise person must know how to avoid deception, Cicero accused Zeno of being inferior to his into the comprehensible and the incomprehensible, permitting for free-will the power of assent (sinkatathesis/συνκατάθεσις) in distinguishing between sense impressions.
  &lt;/p&gt;
  &lt;div&gt;
  &lt;div class="statue"&gt;
      &lt;img src="https://i.postimg.cc/sx21rnDB/Image-2-2x.png
          "class="statue" alt="statue of him"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <hr>
  
  <p>I want a section in which there is heading and text on one side and a picture on the other side. So, for that I created a section in which there are two divs, first one has heading and paragraph and second one has the picture and then in the css I put display as flex. But it didn't work. When I inspected it, it shows that the second div is included in the first div only. </p>
  
  <p>So, I have two questions</p>
  
  <ol>
  <li>Why is the second div included in the first div?</li>
  <li>How to make the flex box work?</li>
  </ol>