skouter/views/report/header.tpl

{{define "header"}}
<header class="heading">

<img src="data:image/png;base64,{{.Letterhead}}" />

<div>
<div class="user-info">
<h4>{{.User.FirstName}} {{.User.LastName}}</h4>
<span>{{.User.Email}}</span>
<span>{{.User.Phone}}</span>
<small>{{.User.Address.Street}}</small>
<small>
{{.User.Address.City}}, {{.User.Address.Region}} {{.User.Address.Zip}}
</small>
</div>
<img src="data:image/png;base64,{{.Avatar}}" />
</div>

</header>

<style scoped>
h4 {
    margin: 4px 0;
}

header.heading > div {
    display: flex;
    text-align: right;
}

header.heading .user-info {
  margin-right: 8px;
}


header.heading {
    display: flex;
    justify-content: space-between;
}

.user-info {
    display: flex;
    flex-flow: column;
}
</style>
{{end}}