Expand clickable link within div to entire parent li (CSS only)

Question

Background:

I have created a ul menu that contains 2 divs -> one div for the icon, second div for the text. Reason for the divs is that I want the text to be neatly vertically aligned, which otherwise wouldn't be the case.

---

Problem:

I managed to make the whole second div clickable with display: block; but I struggle to expand the link beyond the div so that it stretches over the entire li , ie also covers the first div .

---

Attempts:

I already tried using Bootstrap's .stretched-link on the href tag (see first link) and setting position: relative; to all divs and li . However, this didn't work.

---

Question:

Is it somehow possible to expand the link across the entire li , while keeping the divs to neatly align?

---

Note:

(a) I'm aware that one work-around would be to place the href tag around the li , but I understand this isn't good practice anymore.

(b) Just to show the alignment problem, I have created a second JSfiddle, when the divs are removed.

---

JSfiddle

(1) divs included, but icon div not clickable: https://jsfiddle.net/AlphaX/z5f60m23/11/

(2) divs removed and whole li is clickable, but text isn't vertically aligned because font awesome icons have different widths by default: https://jsfiddle.net/AlphaX/89a1x7gs/2/

Answer 1

Just do your second approach, with the <a> wrapping the <i> and the span , and add some additional style rules:

li i {
  width: 20%;
  display: inline-block;
}

I edited your Fiddle too: https://jsfiddle.net/uxnfvzyc/1/