How to avoid line break of HTML-Elements within a parent-span?

I want to put two HTML elements next to each other and avoid that the second element (icon) will start in the next line. They shall always be rendered next to each other by all means.

Code:

   <span class="white-space:nowrap;display:inline-block;overflow: 
   hidden;">
       <span class="ui darkgray label" style="font-family: Courier New, Monospace">0x1fc...cc75</span>
       <a href="https://rinkeby.etherscan.io/address/xxxxxx" 
   target="_blank" style="color: black" title="Lookup on Block-Explorer">
          <i class="eye icon"></i>
       </a>
    </span>

Explanation: the inner and the element shall be rendered next to each other instead of getting rendered line by line.

What happens within smaller browser windows, is this:

What I want to achieve instead:

How to do that?

I read about white-space: nowrap but this is never recognized.
I read also about display:inline-block;overflow: hidden but it all doesnt matter. Browsers are not recognizing anything of these styles.

>Solution :

white-space is used for text wrap, more about white-space
Use flexbox, more about flexbox.

div {
  display: flex;
  flex-wrap: nowrap;
}

span {
  height: 40px;
  border-radius: 4px;
  color: #ffffff;
}

.one {
  width: 200px;
  background-color: red;
  margin-right: 5px;
}

.two {
  width: 40px;
  background-color: blue;
}

<div>
  <span class="one">1</span>
  <span class="two">2</span>
</div>