title: how to achieve this css display?
body: <p><img src="https://i.stack.imgur.com/fK8OA.png" alt="enter image description here"></p>
  
  <p>I found this image while searching the web and I tried to implement this display on my own. This is what I have so far:</p>
  
  <p><img src="https://i.stack.imgur.com/pFkqi.png" alt="enter image description here"></p>
  
  <p>My HTML code is here:</p>
  
  <pre><code>&lt;ul&gt;
  &lt;li&gt;
  &lt;span style="display:block;"&gt;&lt;a href=""&gt;
  &lt;span&gt;&lt;img src="../creation/images/samps/unnamed4.png" width="48" align="absmiddle"/&gt;&lt;/span&gt;
  &lt;span class="price" &gt;Freeep&lt;/span&gt;
  &lt;span class="appname"&gt;Name of the apps that is so long&lt;/span&gt;
  &lt;span class="developer"&gt;by scamexdotexe&lt;/span&gt;
  &lt;/a&gt;
  &lt;/span&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>This is my CSS style:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  li{
  list-style: none;
  width:200px;
  border:1px solid #00CCFF;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
   padding: 0px;
  
  }
  li:hover{
  border:1px solid red;
  }
  li a{
   margin: 0px; 
   display: block; 
   width: 100%; 
   height: 100%;
   white-space:nowrap;
   text-overflow:ellipsis;
   overflow:hidden;
   text-decoration:none;
   padding:2px; 
  }
  li a span img{
  padding: 5px;
  }
  
  .price{
  position:absolute;
  margin-top:4px;
  margin-bottom:4px;
  color:#0099FF;
  font-size:12px;
  
  }
  .appname{
  
  }
  .developer{
  font-size:12px;
  color:#666666;
  margin:0;
  position:inherit;
  display:inline;
  white-space:nowrap;
  
  }
  
  &lt;/style&gt;
  </code></pre>
  
  <p>I spent hours on cloning the display on the first image but it seems that I have no luck. Can you point what I am doing wrong here? What I really want to do is align the app name and the price horizontally and also align the app name, rating, total downloads vertically.</p>