How to reformat Certain HTML Tags Within Code Block To New Lines

Say I have this block of HTML.

<div id="track-user-action">
    <div><button><i class="far fa-comments fa-2x"></i></button></div>
    <div><i class="far fa-sticky-note fa-2x"></i></div>
</div>

I do: CTRL + ALT + SHIFT + l to bring up Reformat File dialog.
Scope: Selected text
Click Run

This is what I end up with:

<div id="track-user-action">
    <div>
        <button><i class="far fa-comments fa-2x"></i></button>
    </div>
    <div><i class="far fa-sticky-note fa-2x"></i></div>
</div>

This is what I WANT to end up with:

<div id="track-user-action">
    <div>
        <button>
            <i class="far fa-comments fa-2x"></i>
        </button>
    </div>
    <div>
        <i class="far fa-sticky-note fa-2x"></i>
    </div>
</div>

I've have spent so much time in the Settings > Code Style > HTML configuration but have not been successful.

Please, anyone that knows how to solve this, I would be forever in your debt.

These are my exported configurations if it helps:

<code_scheme name="Default" version="173">
  <option name="RIGHT_MARGIN" value="100" />
  <HTMLCodeStyleSettings>
    <option name="HTML_KEEP_LINE_BREAKS_IN_TEXT" value="false" />
    <option name="HTML_ELEMENTS_TO_INSERT_NEW_LINE_BEFORE" value="body,div,p,form,h1,h2,h3,a,span,ol,ul,li,pre,i,button" />
    <option name="HTML_ELEMENTS_TO_REMOVE_NEW_LINE_BEFORE" value="" />
    <option name="HTML_DO_NOT_INDENT_CHILDREN_OF" value="" />
    <option name="HTML_INLINE_ELEMENTS" value="i,span" />
    <option name="HTML_DONT_ADD_BREAKS_IF_INLINE_CONTENT" value="abbr,acronym,b,basefont,bdo,big,br,cite,cite,code,dfn,em,font,i,kbd,q,s,samp,select,small,strike,sub,sup,textarea,tt,u,var" />
  </HTMLCodeStyleSettings>
  <codeStyleSettings language="HTML">
    <option name="RIGHT_MARGIN" value="100" />
    <option name="WRAP_ON_TYPING" value="1" />
    <indentOptions>
      <option name="INDENT_SIZE" value="2" />
      <option name="CONTINUATION_INDENT_SIZE" value="4" />
      <option name="TAB_SIZE" value="2" />
      <option name="USE_TAB_CHARACTER" value="true" />
      <option name="SMART_TABS" value="true" />
    </indentOptions>
  </codeStyleSettings>
  <codeStyleSettings language="JavaScript">
    <indentOptions>
      <option name="INDENT_SIZE" value="2" />
      <option name="CONTINUATION_INDENT_SIZE" value="2" />
      <option name="TAB_SIZE" value="2" />
      <option name="USE_TAB_CHARACTER" value="true" />
      <option name="SMART_TABS" value="true" />
      <option name="KEEP_INDENTS_ON_EMPTY_LINES" value="true" />
    </indentOptions>
  </codeStyleSettings>
</code_scheme>