Help with alignment of Label and Select

HTML-CSS
1

Hi all

I am in the process of making a product landing page. I am having difficulty to align label and select to right of the top bar. Can anyone please guide?

<div class="flex-column">
  
  <div id="top-bar">
      <img src="https://www.dropbox.com/s/dh6q1f06d0opucm/the%20economist.png?dl=1" alt="The Economist Logo">
   
    <div id="right">
    <label for="country">Select your Country</label>
    <select id="country">
      <option disabled selected>Select a Country</option>
      <option>Australia</option>
      <option>India</option>
      <option>United States</option>
      <option>United Kingdom</option>
    </select>
    </div>
  </div>
  
  <div id="teaser">
    <br><br>
    <p>You've seen the news, why not discover the story?</p>
    <p>Enjoy unrivalled analysis of the issues that lie behind the headlines</p>
  </div>
  
</div>

CSS

* {
  margin: 0px;
}

.flex-column {
  display: flex;
  flex-direction: column;
  grid-gap: 2em;
}

#top-bar {
  background: #383e42;
  height: 3.5em;
}

img {
  height: 3.5em; /* same height as top-bar */
  margin-left: 3em; 
}

#right label select {
  display: inline-block;
  text-align: right;
}

Here is link to my codepen
Product landing page: the economist subscription

I wanted my page to look like below

Capture
Capture1920×255 28.3 KB

thanks in advance

2

Have you tried using flexbox? This is one potential solution:

/** You might want to consider using classes instead of ids */

#top-bar {
  display: flex;
}

#right {
  margin-left: auto;
}
3

Hi @kevcomedia
I tried your solution but i was not able to make it work. but I have managed to achieve my goal. code is below

<div class="flex-column">
  
  <div class="top-bar">
    <div class="image">
      <img src="https://www.dropbox.com/s/dh6q1f06d0opucm/the%20economist.png?dl=1" alt="The Economist Logo">
  </div>
    <div class="right">
    <label for="country">Select your Country</label>
    <select id="country">
      <option disabled selected>Select a Country</option>
      <option>Australia</option>
      <option>India</option>
      <option>United States</option>
      <option>United Kingdom</option>
    </select>
    </div>
  </div>
  
  <div id="teaser">
    <br><br>
    <p>You've seen the news, why not discover the story?</p>
    <p>Enjoy unrivalled analysis of the issues that lie behind the headlines</p>
  </div>
  
</div>

* {
  margin: 0px;
}

.flex-column {
  display: flex;
  flex-direction: column;
  grid-gap: 2em;
}

.top-bar {
  background: #383e42;
  height: 3.5em;
}

img {
  height: 3.5em; /* same height as top-bar */
  margin-left: 3em; 
}

.image {
  display: inline-block;
  width: 70%;
}

.right {
  display: inline-block;
  position: absolute; 
  line-height: 3em; /*middle it in the bar */
  color: lightgrey;
}