Card Mod for Tile Card: input_select in one row

Hey there,
I had some css course in Uni but I’ve mostly forgotten since then. And now here I am, trying to mod a tile card and at my wits end. I have an input_select for selecting modes in my living room. I want to put that into my living room section, but want to use as little space as possible. So I thought, instead of having a tile card that has two rows (icon/title and the dropdown), I’d move the dropdown up into top row and have the tile go across the whole width of the section. Well, I’ve somehow managed to get them into one row, but the heights are weirdly unaligned now and the card is still 2 rows high despite my best efforts. Can someone help me out with this?
This here is what the card currently looks like:
image
And this is my pathetic effort at css, with the only working thing being the flex-direction and nothing else doing anything, apparently. Yes I’ve tried around with chatGPT but it seems tile cards may just be too new for that :smiley: And yes I know a lot of this is probably redundant and/or complete bullshit…

features:
  - type: select-options
type: tile
entity: input_select.mode
grid_options:
  columns: full
hide_state: true
show_entity_picture: false
vertical: false
card_mod:
  style: |
    --row-size: 1 !important;
    
    ha-card {
      display: grid !important;
      grid-template-columns: 1fr !important;
      grid-auto-rows: 1fr !important;
      align-items: center !important;
    }
    .card {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
    }
    .container {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
    }
    .content {
      display: flex !important;
      align-items: center !important;
    }
    .hui-card-feature {
      display: flex !important;
      align-items: center !important;
    }