title: How to add anchor tag only to the p tag within a div and display p tag text in one line?
body: <p>The <code>div</code> element has a background image. There's a <code>p</code> tag with the image description. However, I do not want the entire <code>div</code> element to be a hyperlink, only the text within the <code>p</code> tag. </p>
  
  <p>current code:
  html  </p>
  
  <pre><code>&lt;div id="p1" class="trp"&gt;&lt;a href="#"&gt;&lt;p&gt;Jacob A.&lt;/p&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;div id="p2" class="trp"&gt;&lt;p&gt;In Jo Sung&lt;/p&gt;&lt;/div&gt;
  &lt;div id="p3" class="trp"&gt;&lt;p&gt;Kim Min Ho&lt;/p&gt;&lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>.trp{
      height: 20px;
      width: 20px; 
      margin: 1%;   
      border: 1px solid black;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
  
  }
  
  .trp p
  {
      text-align:right;
      margin:0px 0px 0px 25px;
      display: inline-block;
      font-size:8pt;
      font-family:Lucida Sans;
      padding:2px;
  }
  </code></pre>
  
  <p>Also, p tag text is showed in two lines instead of one line, although there's enough space.</p>
  
  <p><img src="https://i.stack.imgur.com/iHGGz.png" alt="enter image description here"></p>