JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test">
<a href="https://www.google.com" rel="">
<div class="nitz">      
 
      
   <div class="Cellbox2">
<div class="boxtitle1">That is a big test</div>

<div class="boxtitle2">That is a small one</div>
  </div>
     </div>
     </a>
 </div>

CSS

.test {
  display: block
  width: 400px;
  height: 200px;
  overflow: hidden;
}

.nitz {
  font-family:sans-serif; 
  font-size: 0; 
  width:300px; 
  height:76px; 
  direction:rtl; background-color:#e4e5e8;border-radius: 5px;
display:block;
box-shadow: inset rgba(255,255,255,0.75) 0px 0px 0px 1000px, 
  inset rgba(255,255,255,0.6) 0px 1px 0px, 
  inset rgba(255,255,255,0.4) 0px 0px 0px 1px, rgba(0,0,0,0.2) 0px 1px 3px;
}

.nitz:hover {-webkit-box-shadow: 0px 0px 5px 6px rgba(251,219,90,1);
-moz-box-shadow: 0px 0px 5px 6px rgba(251,219,90,1);
box-shadow: 0px 0px 5px 6px rgba(251,219,90,1);
background-color:#f8f8f9;
  box-sizing: border-box;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.boxtitle1 {font-weight: bold;text-align:right; font-size:14px; padding-bottom:3px;}
.boxtitle2 {text-align:right; font-size:14px;}
    

.Cellbox1 
{width:50px; height:50px; display:inline-block;  margin-bottom:15px; margin-right:15px; margin-top:15px; }
.Cellbox2 
{display:inline-block; margin-right:15px; margin-bottom:15px; vertical-align:top; margin-top:20px;}