title: How do i add the svg files next to my table rows sow they would look neat like in the photo attched
body: <p>So i am building my website for transportation services.</p>
  
  <p>in the form where i ask the user for "pickup" and "destination" i want to achieve a neat Googlish look.
  You can see googles "from" and "to" form here: </p>
  
  <p><a href="https://i.stack.imgur.com/NmyDN.png" rel="nofollow noreferrer">This is the Google wanted style</a><br>
  <a href="https://i.stack.imgur.com/ffC5d.png" rel="nofollow noreferrer">This is What i got</a></p>
  
  <p><a href="https://www.google.com/search?q=get+a+ride&amp;oq=get+a+ride&amp;aqs=chrome.0.69i59l3j0j69i60j0.1495j0j4&amp;sourceid=chrome&amp;ie=UTF-8" rel="nofollow noreferrer">https://www.google.com/search?q=get+a+ride&amp;oq=get+a+ride&amp;aqs=chrome.0.69i59l3j0j69i60j0.1495j0j4&amp;sourceid=chrome&amp;ie=UTF-8</a>
   (it shows only in mobile view)</p>
  
  <p>now the way i have tried was inserting the svg paths inside the table like this: (Don't mind the Rtl direction i need it that way)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;table&gt;
      &lt;tbody&gt;
      &lt;tr&gt;
      &lt;td rowspan="2"&gt;&lt;input type="text" name="place_from" id="from-input" class="txt" placeholder="From" /&gt;&lt;/td&gt; .   
      &lt;td&gt;&lt;svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
        width="10px" height="10px" viewBox="0 65.326 612 502.174" enable-background="new 0 65.326 612 502.174"
        xml:space="preserve" class="dot-circle"&gt;
  
      &lt;path class="st0" d="M256,8C119,8,8,119,8,256s111,248,248,248s248-111,248-248S393,8,256,8z M366.9,256
       c0,61.1-49.7,110.9-110.9,110.9S145.1,317.1,145.1,256S194.9,145.1,256,145.1S366.9,194.9,366.9,256z"/&gt;
      &lt;/svg&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td&gt;&lt;svg version="1.1" id="Layer_1" focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
            x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"&gt;
      &lt;style type="text/css"&gt;
       .st0{fill:#878787;}
      &lt;/style&gt;
      &lt;path class="st0" d="M256,504 M335.8,256c0,44-35.8,79.8-79.8,79.8S176.2,300,176.2,256s35.8-79.8,79.8-79.8S335.8,212,335.8,256z"/&gt;
      &lt;/svg&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td  rowspan="2"&gt;&lt;input type="text" name="place_to" id="to-input" class="txt" placeholder="To" /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;svg version="1.1" id="Layer_1" focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"&gt;
      &lt;style type="text/css"&gt;
       .st0{fill:#878787;}
      &lt;/style&gt;
      &lt;path class="st0" d="M256,504 M335.8,256c0,44-35.8,79.8-79.8,79.8S176.2,300,176.2,256s35.8-79.8,79.8-79.8S335.8,212,335.8,256z"/&gt;
      &lt;/svg&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td&gt;&lt;svg version="1.1" id="Layer_1" focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        x="0px" y="0px" viewBox="0 0 384 512" style="enable-background:new 0 0 384 512;" xml:space="preserve"&gt;
      &lt;style type="text/css"&gt;
       .st0{fill:#878787;}
      &lt;/style&gt;
      &lt;path class="st0" d="M172.3,501.7C27,291,0,269.4,0,192C0,86,86,0,192,0s192,86,192,192c0,77.4-27,99-172.3,309.7
       C202.2,515.4,181.8,515.4,172.3,501.7L172.3,501.7z M192,272c44.2,0,80-35.8,80-80s-35.8-80-80-80s-80,35.8-80,80S147.8,272,192,272z"/&gt;
      &lt;/svg&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tbody&gt;
      &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you see, it looks bad and my question is <strong>what is the best method to get the closest to what google has?</strong></p>
  
  <p>Here is the link for my website so far: <a href="http://moveus.co.il/wp/moveus/" rel="nofollow noreferrer">http://moveus.co.il/wp/moveus/</a></p>
  
  <p>------Update!</p>
  
  <p>I have tried creating a table with <code>&lt;div&gt;</code>s and got a similar result but higher margins which i cant seam to affect with css:
  <a href="https://i.stack.imgur.com/UN9yY.png" rel="nofollow noreferrer">This is what i achieved with div table</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>     .tablewrapper {
        position: relative;
      }
      .table {
        display: table;
        
      }
      .row {
        display: table-row;
      
      
      }
      .cell {
        border: 1px solid ;
        display: table-cell;
        
        
      }
      .cell.empty
      {
        border: none;
        width: 100px;
        
      }
      .cell.rowspanned {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100px;
        
      }
      
      .st0 {
          fill:#878787;
          transform: scale(0.1);
         
          
      }
      
      .st1 {
          fill:#878787;
          transform: scale(0.2);
      
         
      }
      
      .st4 {
          fill:#878787;
          transform: scale(0.2);
      
      
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div class="tablewrapper"&gt;
      &lt;div class="table"&gt;
      &lt;div class="row"&gt;
      &lt;div class="cell"&gt;&lt;input type="text" name="place_from" id="from-input" class="txt" /&gt;&lt;/div&gt;
      &lt;div class="rowspanned cell" &gt;
        &lt;/svg&gt;
      
      &lt;svg version="1.1" id="Layer_1" focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="default"&gt;
      &lt;path class="st0" d="M256,8C119,8,8,119,8,256s111,248,248,248s248-111,248-248S393,8,256,8z M366.9,256
       c0,61.1-49.7,110.9-110.9,110.9S145.1,317.1,145.1,256S194.9,145.1,256,145.1S366.9,194.9,366.9,256z"/&gt;
      &lt;/svg&gt;
      &lt;svg version="1.1" id="Layer_1" focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"&gt;
      &lt;path class="st1" d="M256,504 M335.8,256c0,44-35.8,79.8-79.8,79.8S176.2,300,176.2,256s35.8-79.8,79.8-79.8S335.8,212,335.8,256z"
       /&gt;
      &lt;/svg&gt;
      
      &lt;svg version="1.1" id="Layer_1" focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"&gt;
      &lt;path class="st1" d="M256,504 M335.8,256c0,44-35.8,79.8-79.8,79.8S176.2,300,176.2,256s35.8-79.8,79.8-79.8S335.8,212,335.8,256z"
       /&gt;
      &lt;/svg&gt;
      &lt;svg version="1.1" id="Layer_1" focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"&gt;
      &lt;path class="st1" d="M256,504 M335.8,256c0,44-35.8,79.8-79.8,79.8S176.2,300,176.2,256s35.8-79.8,79.8-79.8S335.8,212,335.8,256z"
       /&gt;
      &lt;/svg&gt;
      
      &lt;svg version="1.1" id="Layer_1" focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        x="0px" y="0px" viewBox="0 0 384 512" style="enable-background:new 0 0 384 512;" xml:space="preserve"&gt;
      &lt;path class="st4" d="M172.3,501.7C27,291,0,269.4,0,192C0,86,86,0,192,0s192,86,192,192c0,77.4-27,99-172.3,309.7
       C202.2,515.4,181.8,515.4,172.3,501.7L172.3,501.7z M192,272c44.2,0,80-35.8,80-80s-35.8-80-80-80s-80,35.8-80,80S147.8,272,192,272
       z"/&gt;
      &lt;/svg&gt;
      &lt;/svg&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
      &lt;div class="cell"&gt;&lt;input type="text" name="place_to" id="to-input" class="txt" /&gt;&lt;/div&gt;
      &lt;div class="empty cell"&gt;&amp;nbsp;&lt;/div&gt;
      
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
   </code></pre>
  </div>
  </div>
  </p>