Problem with form and text alignment

HTML-CSS
1

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

bad
bad1348×625 72.9 KB
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

2

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.

3

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