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

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 >
       <span  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 ></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.

CodePudding user response：

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 >1</span>
  <span >2</span>
</div>