Drop Down Content, Button and Title Not Going Side By Side

Question

I am making a website and want to be able to press a button and drop down content. So far, I have created all the nessicary components (AKA the title, the drop down button, and the content that will drop down). The button works as intended, having the content disapear and appear when pressed. But, the one thing I can't figure out is how to put the title (Which says '2018' next to the button that causes the drop down. I am guessing it has something to do with the display or position, but I am not advanced to know.

HTML:

    <div class="dropdown">
        <div class="dropdown-bar">
            <div class="grade-title">
                <p id="top-title"">2018</p>
            </div>
            <button onclick="myFunction()" class="dropdown-btn">
        </div>
        <div id="myDropdown" class="grade-section dropdown-content">
            <ul class="team-info">
                <li><img class="team-photo" src="assets/school-photos/.JPG"></li>
                <div class="team-text">
                    <li>Arielle</li>
                    <li>Software Lead</li>
                </div>
            </ul>
            <ul class="team-info">
                <li><img class="team-photo" src="assets/school-photos/.JPG"></li>
                <div class="team-text">
                    <li>Ford</li>
                    <li>Software</li>
                </div>
            </ul>
            <ul class="team-info">
                <li><img class="team-photo" src="assets/school-photos/.JPG"></li>
                <div class="team-text">
                    <li>Jack</li>
                    <li>Neural Network Lead</li>
                </div>
            </ul>
            <ul class="team-info">
                <li><img class="team-photo" src="assets/school-photos/.JPG"></li>
                <div class="team-text">
                    <li>Rose</li>
                    <li>Software Lead</li>
                </div>
            </ul>
            <ul class="team-info">
                <li><img class="team-photo" src="assets/school-photos/.JPG"></li>
                <div class="team-text">
                    <li>Sydney</li>
                    <li>Social Media Lead</li>
                </div>
            </ul>
        </div>
    </div>
</div>
</html>

<script type="text/javascript">
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}
</script>

CSS:

.dropdown-btn {
display: inline;
}

.dropdown-content {
display: none;
position: absolute;
}

.show {
display:block;
}

Please let me know if you have a solution, either one that is just a line or two of mine or something completely different. Tips on formatting, proper technic, or just a better way of doing things is also greatly appreciated from a novice such as myself. Thank you.

Answer 1

I suggest making a navbar (use HTML5 <nav> element) and putting everything inside that. Look here for a W3Schools tutorial on navbars, and here for one on hover dropdowns. Also, in your styles, make all your links and everything in the navbar you want side-by-side, make them all display: inline;.

That should fix everything, but just ask if it doesn't.

You should also make sure your <p> element is included in the selection of the display: inline; rule - these elements by default have a break line after them, and this might be causing your problem.

Answer 2

Add this line code:

.grade-title {
  display: inline-block;
}

Note: you miss </button> also.

.dropdown-btn {
display: inline;
}

.dropdown-content {
display: none;
position: absolute;
}

.show {
display:block;
}

.grade-title {
    display: inline-block;
}

<div class="dropdown">
        <div class="dropdown-bar">
            <div class="grade-title">
                <p id="top-title"">2018</p>
            </div>
            <button onclick="myFunction()" class="dropdown-btn" >button</button>
        </div>
        <div id="myDropdown" class="grade-section dropdown-content">
            <ul class="team-info">
                <li><img class="team-photo" src="assets/school-photos/.JPG"></li>
                <div class="team-text">
                    <li>Arielle</li>
                    <li>Software Lead</li>
                </div>
            </ul>
            <ul class="team-info">
                <li><img class="team-photo" src="assets/school-photos/.JPG"></li>
                <div class="team-text">
                    <li>Ford</li>
                    <li>Software</li>
                </div>
            </ul>
            <ul class="team-info">
                <li><img class="team-photo" src="assets/school-photos/.JPG"></li>
                <div class="team-text">
                    <li>Jack</li>
                    <li>Neural Network Lead</li>
                </div>
            </ul>
            <ul class="team-info">
                <li><img class="team-photo" src="assets/school-photos/.JPG"></li>
                <div class="team-text">
                    <li>Rose</li>
                    <li>Software Lead</li>
                </div>
            </ul>
            <ul class="team-info">
                <li><img class="team-photo" src="assets/school-photos/.JPG"></li>
                <div class="team-text">
                    <li>Sydney</li>
                    <li>Social Media Lead</li>
                </div>
            </ul>
        </div>
    </div>
</div>