How to make split list items

Hopefully someone can help here. I have a need to create a split list item where 2 hot spots are clickable.

I have a list like so

<div class="list inset no-margin-top">
<ul>
   <li>
	<div class="item-content">
	<div class="item-inner">
	<div class="item-title description" style="width:100%">
            <h3>Line 1</h3>
            <h4>Line 2</h4>
            <h4>line 3</h4>
        </div>
        <div  class="item-after edit"><i class="icon material-icons">create</i></div>
       </div>
       </div>
  </li>
</ul>
</div>

Nothing unusual so far. .edit and .description have click handlers attached and everything works.

The problem: Although the edit icon is properly to the right side of the list item, it’s clickable region is only about 25px square. The area around it is not clickable no matter how I structure it. I’ve tried wrapping in a div, applying heights (both 100% and fixed numbers), margins, padding but it’s always 25x25 and right in the middle. This makes it hard to press on the phone with such a tiny area. Any way to link the entire area around the icon from the top of the list item to the bottom?