How to make span the same size as its children? - html

Question

I'm trying to place the logo and the form on the same line but can't because the span that containing the logo is spanning the whole line. How do I make it the same size as its content?
header {
text-align: right;
background-color: #333333;
border-bottom-width: 1px;
}
.clear {
display: inline;
margin-left: 5px;
}
.LogoHeader {
height: 25%;
width: 25%;
border-spacing: 20px;
vertical-align: middle;
margin-left: 47px;
}
.SearchForm {
display: inline;
padding: 10px 0px;
}
.SearchField {
display: inline;
border: none;
margin: 0;
line-height: 20px;
object-position: right;
margin: 0px 10px white;
}
.SearchButton {
display: inline;
background-color: deeppink;
border-style: none;
line-height: 20px;
}
<header>
<span style="position:relative;float: right; clear: right; width: 100%;"><img class="LogoHeader" src="C:\Users\David\Desktop\WebDevelopmentTest\images\NotWalla\logo.svg" alt="My news website"></span>
<div style="position: relative; vertical-align: middle; right: 50%; display: inline-block; height: -50%">
<form class="SearchForm">
<input class="SearchButton" type="submit" value="Search"><input class="SearchField" type="text" name="q" value autocomplete="off">
</form>
</div>
</header>

Answer 1

You can remove the width: 100%; from span styles.

Answer 2

Well... After some messing around I was able to figure it out!
You can't really see it in the code below but it definitely works.
Thank you all for the help.
header {
text-align: right;
background-color: #333333;
border-bottom-width: 1px;
}
.clear {
display: inline;
min-height: 28px;
}
.LogoHeader {
width: 100%;
height: 100%
}
.SearchForm {
display: inline;
padding: 10px 0px;
margin-right: 10px;
}
.SearchField {
border: none;
line-height: 30px;
margin: 0px 10px white;
direction: rtl;
}
.SearchButton {
background-color: deeppink;
border-style: none;
line-height: 30px;
<header style=" border-bottom: 20px solid #333; border-top: 20px solid #333;">
<div style=" width: 100%; float: right; clear: both; max-width: 303px; margin-right: 10px; transform: translateY(-6px)">
<img class="LogoHeader" src="C:\Users\David\Desktop\WebDevelopmentTest\images\NotWalla\logo.svg" alt="My news website">
</div>
<form class="SearchForm">
<input class="SearchButton" type="submit" value="Search"><input class="SearchField" type="text" name="q" value autocomplete="off">
</form>
</header>