Get an Icon with subtext and then a list on the same line?

Question

I'm trying to simply make an icon with subtext and then menu options all on the same line. However, it keeps positioning the menu options on a different line. I.e., my html looks like the following: Icon(w/subtext)
**space Test1 Test2 etc...

    .wrapper {
      display: inline-block;
      white-space: nowrap;
    }
    
    ul li {
      display: inline;
      white-space: nowrap;
    }

  <div>
    <div className="wrapper">
     <div className="logo">
   <a href="/"><img height="35" width="35" src={Logo} alt="TriLogo"/></a>
     </div>
     <div className="text">
      Triangular
     </div>
    </div>
    <ul>     
     <li><a href="/">Test1</a></li>
     <li><a href="/">Test2</a></li>
     <li><a href="/">Test3</a></li>
     <li><a href="/">Sit amet</a></li>    
    </ul>
   </div>

Answer 1

Here is what I did to make it work, hopefully this is what you needed.

I made the css look like this:

 li,.wrapper {
     float: left;
     top: 0px;
     margin-left:20px;
 }

https://jsfiddle.net/xJoeTheHobox/6ds37v8m/47/

Answer 2

Because you are not displaying .wrapper's children (logo and text) inline. Same with the ul.

Below changes in CSS will help you to fix it.

.wrapper, .wrapper{
  display: inline-block;
  white-space: nowrap;
}

ul, li {
  display: inline;
  white-space: nowrap;
}

.wrapper, .wrapper {
  display: inline-block;
  white-space: nowrap;
  vertical-align:top;
}

ul, li {
  display: inline;
  white-space: nowrap;
}

<div>
            <div class="wrapper">
                <div class="logo">
        <a href="/"><img height="35" width="35" src={Logo} alt="TriLogo"/></a>
                </div>
                <div class="text">
                    Triangular
                </div>
            </div>
            <ul>                    
                <li><a href="/">Test1</a></li>
                <li><a href="/">Test2</a></li>
                <li><a href="/">Test3</a></li>
                <li><a href="/">Sit amet</a></li>               
            </ul>
        </div>

You can also test it here.

UPDATE 1:

I have move subtext to below the logo.

Test it here