JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>adaptive circle</title>
  <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
  <div class="container">
    <div class="column1">
      <div class="circle"> 
      </div>
    </div>
    <div class="column2">2</div>
  </div>
 </body>
</html>

CSS

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
    align-content: center;
    width: 100%;
    background: #f0f0f0;
   }

  .column1 {
    width: 33%;
    background: #f7f7f7;
    border: 1px solid black;
   }

  .column2 {
    width: 51%;
    background: #f7f7f7;
    border: 1px solid black;
   }

   .circle {
    background-color: #3D6CB0;
    border-radius: 50% 50%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 50%;
    padding-bottom: 50%;
   }