How do I get my icon to horizontally line up with my drop down box?

having a bit of trouble lining up my icon with my dropdown box. I'm using jQuery Mobile. I have tried using the inline-block feature but I'm having no luck with it.

Could anyone help me with a solution. Thanks

<head>
<!--jQuery CDN Hosted Files-->
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>

<body >
<div style="padding: 20px;">

<img src="https://lh4.googleusercontent.com/-HhNoCFJ803s/AAAAAAAAAAI/AAAAAAAAAAA/ABtNlbAXJpr-jDsvmXVw0tx4PHId84zrlw/mo/photo.jpg?sz=32" class="loginBoxImg">
  <select name="type" id="type">
      <img src="">
      <option value="">Account Type...</option>
      <option value="Teacher">Teacher</option>
      <option value="School">School</option>
  </select><br>
</div>
</body>

Solution

You can use flexbox to achieve this, first wrap the select and the img in a container

<head>
<!--jQuery CDN Hosted Files-->
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>

<body >
<div style="padding: 20px;" class="container">

<img src="https://lh4.googleusercontent.com/-HhNoCFJ803s/AAAAAAAAAAI/AAAAAAAAAAA/ABtNlbAXJpr-jDsvmXVw0tx4PHId84zrlw/mo/photo.jpg?sz=32" class="loginBoxImg">

  <select name="type" id="type" style="min-width:90%;">
      <option value="">Account Type...</option>
      <option value="Teacher">Teacher</option>
      <option value="School">School</option>
  </select><br>
</div>
</body>

And then give that container a display: flex;

.container{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

And for the last you need to give to the class .ui-select a 90% width

.ui-select{
  width: 90%;
}

Here you have a codepen to test it, and here information about flexbox and how to use it, let me know if that help!