Trouble positioning elements in a header

[Travercraig]

I have these elements in the header and I'm having trouble positioning them in the correct way. The two elements are the buttons at the top of the header displaying the IP of the server and the other one displaying the team speak server, that's also a link. I've got part of these elements positioned correctly I just can't seem to position all of them right. This is what it should be like, but currently it looks like this. Here is a fiddle as well of what it's currently like. I'll also post the individual code for these elements. If anyone could help me sort these positions out, or even if the html code needs reorganising for the two buttons I'd appreciate it. I've tried all sorts of different things but it just makes it worse.

<header>          <img id="logo" src="images/CRAFT412 - Logo.png" alt="LOGO"><div id="header-wrapper">                                                                        <div id="ip_box">                         <span id="ip_text">SERVER IP                           craft412.serveminecraft.net</span>                     </div>          <div id="teamspeak_box">                                <a href="ts3server://craft412.serveminecraft.net:9987"></a>                                <span id="teamspeak_box_2"></span>                                <span id="teamspeak_text">TEAMSPEAK</span>                                <img  id="teamspeak_image" src="images/CRAFT412 - Box - Teamspeak.png" alt="TEAMSPEAK ICON"/>                            </div></div>                                                </header>

#header-wrapper {width:90%;                 margin:auto;                 position:relative;}header {height: 150px;        background-image:url('../images/SiteBackground.png');        border-bottom: 5px solid #C62828;        position:relative;}#logo {position: absolute;       top: 50%;       left: 50%;       transform: translate(-50%, -50%);}#ip_box {width: 210px;         height: 45px;         background: #212121;                        color: white;         font-size: 15px;	     	     position: absolute;}#ip_text {color: white;          font-family: 'Roboto', sans-serif;}#teamspeak_box {width: 159px;                height: 45px;                background: #212121;                                             float:right;                transition: all 0.5s ease;}#teamspeak_box:hover {border-bottom: 4px solid #C62828;                      background: #313131;                      transition: all 0.5s ease;}#teamspeak_box a {display: block;                  height: 45px;}#teamspeak_box_2 {                  float:right;                  position: absolute;                  width: 45px;                  height: 45px;                  background:#313131;}#teamspeak_image {}#teamspeak_text {color: white;                 text-align:45px;                 font-family: 'Roboto', sans-serif;}

[prolemur]

In the fiddle use a source that's on the internet so others can see

[Travercraig]

In the fiddle use a source that's on the internet so others can see

What?

[Neil]

What?

 

Your images, etc, aren't on the internet--they're on your computer. No one else can see them.

[Travercraig]

Your images, etc, aren't on the internet--they're on your computer. No one else can see them.

Oh right, however there's no need to be able to see them, you can see where the positions are and you can see what the images are on my screenshot.