Problem with form and text alignment

Hello, I’m making a page with many forms and text next to form, but i have this:

as you can see the forms and the text are not aligned with forms and text below. I would like to have this: https:// imgur. com/ 7QBEoL2 (sorry for the spaces in the link, but i was unable to put entire link).
My css and my forms:

<html>
<style>
input[type=text] {
    width: 10%;
    margin: 7.5px 0;
    box-sizing: border-box;
}
input[type=submit].class1 {
    width: 50%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
}
input[type=submit].class2 {
    width: 50%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
}
body, html {
  width: 100%;
  height: 100%;
  margin: 0;
}

.container {
  width: 100%;
  height: 100%;
}

.leftpane {
    width: 33%;
    height: 100%;
    float: left;
    border-collapse: collapse;
}

.middlepane {
    width: 33%;
    height: 100%;
    float: left;
    border-collapse: collapse;
}

.rightpane {
  width: 33%;
  height: 100%;
  position: relative;
  float: right;
  border-collapse: collapse;
}
form {
    display: inline-block;
}
h1 {
    font-size: 19.5px;
}

</style>
<body>
<div class="container">

<?php
//CONNECT TO DB

// THIS FUNCTION ADD THE FORMS
function add_form($product,$name,$productp)
{
  echo $name;
  $productpt = "X";

  echo '<input type="text" name="'. $product. '" id="'. $product. '" style="font-size:12pt;height:30px"/> x'.$productp. ' price:'.$productpt.'<br>';
}

echo '<form  method="post" name="form1" id="form1">'; //start form


echo '<div class="leftpane">'; //start leftpane
echo '<h1>';

echo '<font size="6" color="red"> ALIMENTS </font><br>';

add_form('x', 'aaaaaaaaa', 4.50);

add_form('x', 'bbbbbbbbbbbbbbbbbbb', 5);

add_form('y', 'ccc', 5);

add_form('x', 'd', 4);

add_form('x', 'eeeee', 3.50);

add_form('x', 'ffffffffffffff', 2);

add_form('x', 'gggggggg', 1.50);

add_form('x', '11111', 5);

add_form('x', '2222222222222', 6.50);

add_form('x', 'qqq', 3.50);

add_form('x', 'xxxxxxx', 9);

echo '</h1>';
echo '</div>'; //Close leftpane

... Do the others stuff in <div class="middlepane"> and in <div class="rightpane">

As you can see I used php function to generate form, but it’s equivalent to:

<input type="text" name="x" id="x" style="font-size:12pt;height:30px"/> x4.50 price:X <br>

So how can i fix it and align the form and the text as in the second photo?

ps sorry for my bad english

Hi, and welcome to freeCodeCamp! This board may be a little different than what you are used to. Campers (a freeCodeCamp member) use this board to ask other campers evaluate our code, provide hints as to what we need to edit. We don’t use it as a quick way to have an answer provided to us.

I encourage you to work through the curriculum. Even if you “know” how to code, I’m sure that you would benefit from the courses as the answer that you seek for the code above is in there for you to learn.

Thanks for your kind reply, i’m so sorry for the mistake, do I delete this post?
EDIT: I unable to delete and to flag this post, can moderators please delete this post? Sorry for the mistake

There is nothing wrong with the question you have asked. We welcome any coding related question (not just curriculum based questions). That being said, It may be a while (or never) before someone gives you the solution you request.

I would take @var-d’s advice and work through our curriculum and study our curriculum. You might find it provides you with the knowledge you need to figure a solution out on your own.