<main>
  
  <section>
    <figure>
      <img src="https://wallpapercave.com/wp/wp2742433.jpg" alt="css wallpaper" width="250" height="200">
      <figcaption>
        Cascading Style Sheets Level 3 (CSS3) is the iteration of the CSS standard used in the styling and formatting of Web pages. CSS3 incorporates the CSS2 standard with some changes and improvements. A key change is the division of standard into separate modules, which makes it easier to learn and understand.
      </figcaption>
    </figure>
  </section>
  
  <section>
    <figure>
      <img src="https://cutewallpaper.org/21/javascript-wallpaper/JavaScript-Wallpapers-Wallpaper-Cave.jpg" alt="js wallpaper" width="250" height="200">
      <figcaption>
        JavaScript is a dynamic computer programming language. It is lightweight and most commonly used as a part of web pages, whose implementations allow client-side script to interact with the user and make dynamic pages. It is an interpreted programming language with object-oriented capabilities.
      </figcaption>
    </figure>
  </section>
  
  <section>
    <figure>
      <img id="ruby" src="https://wallpapercave.com/wp/wp1872775.jpg" alt="ruby wallpaper" width="250" height="200">
      <figcaption>
        Ruby is a dynamic, open source programming language with a focus on simplicity and productivity. It has an elegant syntax that is natural to read and easy to write.
      </figcaption>
    </figure>
  </section>
 
  <section>
    <figure>
      <img id="react" src="https://hdwallpaperim.com/wp-content/uploads/2017/08/25/461262-reactJS-Facebook-JavaScript-minimalism-simple_background.jpg" alt="react wallpaper" width="250" height="200">
      <figcaption>
        React is a library for building composable user interfaces. It encourages the creation of reusable UI components, which present data that changes over time. Lots of people use React as the V in MVC. React abstracts away the DOM from you, offering a simpler programming model and better performance.
      </figcaption>
    </figure>
  </section>
  
</main>

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

section {
  float: left;
  border: solid black 8px;
  width: 50%;
  height: 400px;
  overflow: auto;
}

img {
  /* 
    To center the image, comment out
    'float: left;', and uncomment
    the display and margin property.
  */
  float: left;
/*   display: block;
  margin: 0 auto; */
}

figure{
  margin-top: 10px;
}

figcaption{
  /* 
    comment out the 'clear: both;' property
    to see how clear affects the floated
    image. 
  */
  clear: both;
  text-align: center;
  padding: 20px;
}