Как сверстать блок header средствами только css и html?

.wrapper{
  background: linear-gradient(to right, #D0CFD4 30%, #E8E8E8 60% );
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
}

.logo{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;

}

.a{
  font-size: 35px;
  text-transform: capitalize;
  color: #373737;
}
.b{
  color: #C03635;
}
.list{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: flex-end;
  align-items: flex-end;
}
ul{
  list-style-type: none;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}
li{
  margin-left: 20px;
  border-right: 1px solid #000;
  padding-right: 10px;
}
li:hover{
color: red;
}
li:last-child{
  border-right: none;
}

<div class="wrapper">
  <div class="logo">
 <a href="https://imgbb.com/"><img src="https://i.stack.imgur.com/AieOc.png" alt="1586433967272" border="0"></a>
    <span class='a'>Xman<span class='b'>Bank</span></span>
  </div>
  <div class="list">
    <ul>
      <li>My account</li>
      <li>Settings</li>
      <li>Logout</li>
    </ul>
  </div>
</div>

div {
  position: relative; width: 100%; height: 90px;
  background: linear-gradient(to right, #D0CFD4 30%, #E8E8E8 60%);
}

ul {
  list-style: none; margin: 0;
  position: absolute;
  bottom: 14px; right: 10px;
}

li {display: inline-block; padding: 0 8px 0 4px; line-height: 14px;}
li:hover {color: red;}
li:not(:last-child) {border-right: 1px solid #000;}

img {float: left; margin: 7px 7px 0 14px;}
span {line-height: 90px; font-size: 35px; color: #373737;}
span>span {color: #C03635;}

<div>
  <img src="https://i.stack.imgur.com/AieOc.png"><span>Xman<span>Bank</span></span>
  <ul>
    <li>My account</li>
    <li>Settings</li>
    <li>Logout</li>
  </ul>
</div>