Unable to apply custom formatting to ion-input

If the desired result is this:

I’m hitting dead-end trying to achieve this in Ionic. Obviously this is a very straight forward formatting task in vanilla css. But to force an ionic component to look the same appears to be undoable, without an extraordinary amount of effort…

Here’s where I am at so far. I realise it’s a mess as is but it serves to illustrate the approach. By now, I’ve tried so many things by now and gotten close but then pulled it down again in disgust at how ridiculously complex the code got.

The specific issues are:

1. Can’t control the height of the ion-input element.
2. Can’t find a satisfactory way to align / offset vertical the input text (moving the units is easy - it’s in a div I can access directly).

with this code:

<ion-item
  [ngClass]="classes"
  class="monkey-ion-item"
  lines="none">

  <!-- Label Text -->
  <span class="label-span"> {{ label }} </span>

  <!-- User Input -->
  <ion-input
    #ionInputEl
    [value]="inputModel"
    (ionInput)="onInput($event)"
    (ionBlur)="onBlur()"
    class="monkey-ion-input right-aligned"
  >

    <!-- Label -->
    <div slot="label" class="monkey-input-label">{{ units }}</div>

  </ion-input>

</ion-item>

And this scss:

/** Main Styles */
.monkey-ion-item {
  --padding-start: 0;
  --inner-padding-end: 0;

  // height: 42px;

  --background: transparent;

  width: 100%;
  display: flex;
  align-items: bottom;

  .label-span {
    @extend .text-medium;

    flex: 1;
    margin-right: 8px;
    white-space: nowrap;        // prevent wrapping
    overflow: hidden;           // handle overflow
    text-overflow: ellipsis;    // show ... when text is too long
  }


  .monkey-ion-input {
    @extend .text-medium;

    --background: transparent;
    max-width: 120px;
    transition: border-color 0.2s ease;

    border-bottom: 1px solid var(--dark-gray);  // Move the border to the container

    &:focus-within {  // Change border when input is focused
      border-bottom-color: var(--lines-and-text);
    }

    .monkey-input-label {
      color: var(--gray);
      transform: translateY(7px); // moves label (units) down
    }
  }
}

I made some progress using ::ng-deep and then hacking through the various elements. But it’s not an acceptable approach. I’m starting to think that I’m kind of wasting my time trying to adapt ionic components. Unless I’m missing something really obvious…