Putting button text: Name, Status, Attribute, etc. on the same line

[dhess83]

Goal

Currently, in Bubble Cards, when you display only a Name, it displays as a single line.
If you display Name, Entity State, or Attribute, they appear on a new second line, doubling the total heigh of text.
I would like to use CSS to force the secondary text line to appear on the same line as the primary text.

Source Yaml

type: custom:bubble-card
card_type: select
button_type: switch
sub_button:
  main: []
  bottom: []
select_attribute: source_list
entity: media_player.bedroom_wiim_3
tap_action:
  action: none
button_action: {}
scrolling_effect: false
force_icon: false
show_icon: false
show_name: true
show_state: true
show_attribute: true
show_last_updated: false
show_last_changed: false
styles: >-
  * { background: green; border-radius: 0px !important ; margin-top: 0px
  !important; height: 46px !important;   } .bubble-name-container { line-height:
  1.8 } *:nth-child(n) { color: black !important; background: none ! }
:host {
    flex: 3.5 !important;
    margin: 0 !important;
    padding-top: 4px !important;
    padding: 0 !important;
  } ha-card {
    margin: 0 !important;
  }
attribute: source
rows: 1
name: Surround

Which step did you already try?

I've tried doing this with CSS nth-child selectors, but have not had any luck.

Problem

No response

Read the documentation

• I have read the documentation