title: css border bottom changed depending upon the value
body: <p>Here is the html code</p>
  
  <pre><code>&lt;div&gt;
     &lt;div class="fractop"&gt;&lt;span&gt;11&lt;/span&gt;&lt;/div&gt;
     &lt;div class="fracbottom"&gt;2&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
     &lt;div class="fractop"&gt;&lt;span&gt;5&lt;/span&gt;&lt;/div&gt;
     &lt;div class="fracbottom"&gt;2&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
     &lt;div class="fractop"&gt;&lt;span&gt;-135&lt;/span&gt;&lt;/div&gt;
     &lt;div class="fracbottom"&gt;25&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the css code</p>
  
  <pre><code>&lt;style&gt;
     .fractop{
         border-bottom:solid black 0px; 
         display:inline-block; 
         float:left;
         margin-top:20px; 
         text-align:center; 
         width:100%;
     }
     .fracbottom{ 
         display:inline-block;
         clear:left; 
         float:left; 
         width:100%; 
         text-align:center;
     }
     .fractop span{
   border-bottom:solid black 3px; 
     width: 17px;
     display: inline-block;
  }
  
  &lt;/style&gt;
  </code></pre>
  
  <p>Now the divide by line is same width as 17px. I need to change that width dynamically depending upon the number. If the number is one digit, then the divide by line start from before the number and end with after the number. How can i put a line dynamically?</p>