<header>
  <img src="https://miro.medium.com/max/3930/1*6aFNrJlEaYrARu_kncbPzA@2x.jpeg">
  <div class="salmon">
    <h1>Hello World</h1>
    <div class="right">
      <button>Save and Exit</button>
      <p><span>Let's be friends</span><span>Test 1</span><span>Test 2</span><span>Test 3</span></p>
    </div>
  </div>
    
  
  
  
  
</header>

header {
  display: flex;
  flex-wrap: wrap;
}

img {
  width: 180px;
}

.salmon {
  flex: 1 0 0;
  justify-content: space-between;
  display: flex;
  flex-wrap: wrap;
  background-color: coral;
}

h1 {
  font: bold 30px sans-serif;
  color: white;
  margin: 6px 10px;
  white-space: nowrap;
}

.right{
  display:flex;
  flex-wrap: wrap;
  flex-direction:row-reverse;
}

p {
  font: 14px sans-serif;
  color: white;
  margin: 15px 10px;
  white-space: nowrap;
}

span ~ span::before {
  content: ">";
  margin: 0 5px;
}

button{
  margin: 10px;
  background-color: blue;
  font: 18px sans-serif;
  color: white;
  padding:10px;
  align-self:flex-start;
  white-space: nowrap;
}