I am attempting to create a simple layout. Currently, this is what I have: https://i.sstatic.net/2Ji5r.png
The code in question is as follows:
{% extends 'base.html' %}
{% load static %}
{% block content %}
<style>
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
</style>
<div class='center'>
<form action='.' method='POST'> {% csrf_token %}
<div align="right">
<input type="text" name='title' placeholder='Food title'/>
</div>
<div align='left'>
<input type="text" name='q' placeholder='Search Image'/>
<input type="submit" value='Search!'/>
</div>
{% for image in images %}
<img src="{% static 'img/search/' %}{{ image }}", alt=""/>
<input type="radio" name="imageRadio" value={{image}}/>
</br>
{% endfor %}
<input type="submit" value='Go!'/>
</form>
</div>
{% endblock content %}
My current dilemma lies in aligning the Food title input and search bar on the same line without one being positioned slightly higher than the other. How can I achieve this desired spacing?