<!doctype html>
<html lang="">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Proportional Box</title>
</head>

<body class="flex h-screen justify-center">
  
    <div 
         id="box" 
         class="flex flex-wrap bg-orange-400 self-center mx-12 p-4">
            <h4 class="font-bold text-xl mb-2 w-full">
              Box Title
      </h4>
      
            <p class="w-full">
              This is some markup.
            </p>
      
            <img class="w-4/12 h-full" src="//placehold.it/50x50">  
      <img class="inline-block w-4/12" src="//placehold.it/50x50">
      <img class="inline-block w-4/12" src="//placehold.it/50x50">  
      
    </div>

</body>

</html>



#box {
  width: 60vh;
}

#box::after {
  content: '';
  display: block;
  padding-bottom: 110%;
}

img {
  align-self: center;
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.2.0/tailwind.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.