How to align textbox and button in footer?

Currently stuck on how to align the textbox and button on the same line with 50% width (in footer), can anyone give me some sort or guide or able to fix this issue for me?

[Extra questions, any further support or guidance would be appreciated, Wireframe given for basic idea]

One being how to put spacing between the text and picture that are aligned below the navbar.

Below that, how to put a thin border for each separate picture and box of text.

(Sorry if i'm not allowed to ask extra questions)

Solution

You could use css flexbox to achieve the

"align the textbox and button on the same line with 50% width"

part Specifically, add

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

to your css file. I included the modified project below so that you could check the effect. More about CSS flexbox at here.

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}

.paragraph {
    padding: 5px;
}

.row {
    display: flex;
}

/* Create three equal columns that sits next to each other */
.column {
    flex: 33.33%;
    padding: 5px;
}


.footer {
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1rem;
    text-align: center;
}

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

input[type=text] {
    width: 50%;
    padding: 15px;
    margin: 5px 0 5px 0;
    display: inline-block;
    border: none;
    background: #f1f1f1;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="main.css">

    <title>Chollerton Tearooms</title>
</head>
<body>

<ul>
    <li><a class="" href="index.html">Home</a></li>
    <li><a href="index.html">Find out more</a></li>
    <li><a href="index.html">Credits</a></li>
    <li><a href="Wireframe.html">Wireframe</a></li>
    <li><a href="index.html">Admin</a></li>
</ul>

<div class="main-column">
    <div class="paragraph">
        <img src="Tearoom.png" alt="Holiday" width="400" height="200" align="left">

        <h1> Tearoom</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis mi eget, dictum erat.

</p>
    </div>
</div>

<br><br><br><br>

<div class="row">
    <div class="column">
        <img src="Craftshop.png" alt="Craft" style="width:100%">
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis mi eget, dictum erat.
    </div>

    <div class="column">
        <img src="General%20Store.jpg" alt="Store" style="width:100%">
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis mi eget, dictum erat.

    </div>

    <div class="column">
        <img src="B&B.jpg" alt="Bed and breakfast" style="width:100%">
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis mi eget, dictum erat.

    </div>
</div>

<div class="footer"> what i did to ensure that the footer stayed in the correct position was actually setting the position to be absolute, this will stop it from overlapping.</div>

<form action="/action_page.php" style="border:1px solid #ccc">
    <div class="container">


        <input type="text" placeholder="Enter Email" name="email" required>


        <div class="clearfix">
            <button type="submit" class="signupbtn">Subscribe </button>
        </div>
    </div>
</form>



</body>
</html>

As of adding space between image and text, you could simply apply a margin or some padding to the image. Something like this will do:

.desired-img {
    margin: 5px;
}

To add border to a paragraph, simply use css to style your border. Something like this will do the job:

.column {
    border: 1px solid lightgrey;
}

Hope this helps!