Picture elements, 2x state-label with varying lengths of text in a row

Configuration Frontend
1

Hello,

is it possible to put 2 state-label in a row in the picture-elements card in such a way that the values ​​are neatly in a row even with different text lengths?

Excuse my bad English

2

Suggest you to add a draft picture to show what you need to minimize misunderstanding.

3

This is the corresponding area on the card:

image

  - type: icon
    icon: mdi:weather-windy
    style:
      top: 32%
      left: 15%
      color: var(--paper-item-icon-color)
      '--mdc-icon-size': 22px
  - type: state-label
    entity: input_text.Summary_WindDirectionStr_d1
    tap_action:
      action: none
    style:
      top: 33%
      left: 17%
      font-size: 12px
      color: var(--secondary-text-color)
      transform: translate(0%, -50%)
  - type: state-label
    entity: input_number.Summary_WindSpeed
    tap_action:
      action: none
    style:
      top: 33%
      left: 35%
      font-size: 12px
      color: var(--secondary-text-color)
      transform: translate(-100%, -50%)

But now it can happen that the text of input_text.Summary_WindDirectionStr_d1 becomes longer. So it runs into input_number.Summary_WindSpeed.

In addition, the distance between the elements is changing a lot at the moment, for example when I turn my smartphone or look on another device.

4

Your options:

  1. Add a markdown card with these 2 values instead of 2 state-labels.
  2. Add a custom card like multiple-entity-row (which may show 2 values in a row) instead of 2 state-labels.

In both options you may hide a border / define a background etc by card-mod to make an added card less vivid.

5

OK,

Thanks for your answer.

6

Or use a template sensor that combines the input_text and the input_number and display that in the state-label instead