(probably) simple Lovelace UI arrangement problem

Good day,

I have a Entities Card in which I would like to imbed two other cards. Right now, it does look like this:

21%20PM

I’m actually monitoring my Home Assistant docker image.

I would like to have a separation between the two graphs. Right now, those two are next to each other and when the graph lines are aligned, it looks like a single graph for two sensors (very weird).

Here is my lovelace yaml:

      - type: entities
        show_header_toggle: off
        entities:
          - type: section
            label: Home-Assistant
          - type: custom:vertical-stack-in-card
            cards:
              - type: horizontal-stack
                cards:
                  - type: custom:mini-graph-card
                    name: CPU Usage
                    entities: 
                      - sensor.docker_home_assistant_cpu_use
                    height: 25
                    line_width: 2
                    font_size: 70
                    hours_to_show: 24
                    points_per_hour: 1
                    show:
                      extrema: true
                      fill: true
                    color_thresholds:
                      - value: 90
                        color: "#FFFF00"
                      - value: 80
                        color: "#1db954"
                      - value: 0
                        color: "#3498db"
                  - type: custom:mini-graph-card
                    name: Memory Usage
                    entities: 
                      - sensor.docker_home_assistant_memory_use_percent
                    height: 25
                    line_width: 2
                    font_size: 70
                    hours_to_show: 24
                    points_per_hour: 1
                    show:
                      extrema: true
                      fill: true
                    color_thresholds:
                      - value: 90
                        color: "#FFFF00"
                      - value: 80
                        color: "#1db954"
                      - value: 0
                        color: "#3498db"

I do not need to exactly follow what I’ve done… I was trying for the last two or three hours… The result I would like to have is a card in which I see two cards (with the borders, padding and shadow). A spacer could work too, depending on how it looks. A “divider” won’t work though… I’ve tried it!

Thank you for your help!

Remove the vertical-stack-in-card and try it with only the horizontal-stack.
You can use it with a trick in entity cards.

- type: custom:hui-horizontal-stack-card
  cards:
    - type: custom:mini-graph-card
      ...
    - type: custom:mini-graph-card
      ...