How to align div to mat-expansion-panel-header?-CodePudding

I am stucked with the MatExpansionModule from Angular. In the mat-expansion-panel-header part, I would like to display an image and a short description. However, the image and description do not automatically adapt to the section.

 <mat-expansion-panel>
        <mat-expansion-panel-header>
            <div >
                <img [src]="picture" alt="pic description" />
            </div>
            <div >
                <h4>Hello</h4>
                <h6>{{ userName }}</h6>
            </div>
        </mat-expansion-panel-header>
        <p>some content</p>
    </mat-expansion-panel>

How can this be styled correctly so the image and description is rendered correctly in the header part of the expansion?

Edit: style-sheet:

mat-expansion-panel {
    background-color: blueviolet;
    color: white;
    position: absolute;
    top: 0;
    right: 0;
    width: 25%;

}

.msg-header-img {
    border-radius: 50%;
    width: 40px;
    margin-top: 10px;
    padding-right: 10px;
    background-color: rgb(72, 72, 97);
}


.msg-header-description {
    width: auto;
    float: left;
    margin-top: 10px;
}

.msg-header-description h4 {
    font-size: 16px;
    width: 100%;
    color: #fff;

}

.msg-header-description h6 {
    font-size: 10px;
    line-height: 2px;
    color: #fff;

}

mat-expansion-panel-header {
    background-color: red;

}

I want it to look something like this:

CodePudding user response：

Your layout is wrong. You should also use mat-panel-title and mat-panel-description to manage some of the responsibility so that you can simplify:

<mat-expansion-panel>
    <mat-expansion-panel-header>
        <mat-panel-title >
            <img [src]="picture" alt="pic description" />
        </mat-panel-title>
        <mat-panel-description >
            <h4>Hello</h4>
            <h6>{{ userName }}</h6>
        </mat-panel-description>
    </mat-expansion-panel-header>
    <p>some content</p>
</mat-expansion-panel>

mat-expansion-panel {
  background-color: blueviolet;
  color: white;
}

.msg-header-img {
  flex-grow: 0;
}

.msg-header-img img {
  width: 40px;
}

.msg-header-description {
  flex-direction: column;
  align-items: flex-start;
  color: #fff;
}

.msg-header-description h4 {
  font-size: 16px;
  margin: 0;
}

.msg-header-description h6 {
  font-size: 10px;
  margin: 0;
}