While the first question was easy, this one is a bit harder due to the way that Float behaves. In general, when it wraps to a new line, it will wrap to a location that is just below the tallest element on the line above (as you discovered). You have a few choices:

1. Build an HTML table using table, tr, td, etc... then use javascript to move the Laserfiche fields into the cells. This makes the grid alignment easy, but it can cause other formatting problems. Certain CSS features are not available in Table elements, and this approach is generally frowned upon in modern web development.
2. Manually position each element with CSS. This is tedious, and can be tough to get right in a way that will display well on a variety of screens/devices. Wouldn't recommend this either.
3. Use a third party library... Something like the jQuery Masonry plugin. By far the easiest way, but it does require you to reference another script when you load the page. This is what I would recommend, and I can give you a code snippet that uses Masonry below

You will need to use the JavaScript section to load the script and initialize it for your collection of fields. You have to target the container of the elements to apply the script. I would recommend putting your collection of fields into a section, and giving that a CSS class like "ShipmentDetails". Within that section, there will be a <ul> HTML element that contains a bunch of <li> elements which are the actual fields. When you give a field a CSS class, it applies to the <li> element. You should arrange your fields in the following order and give them the following classes on the layout page:

1. Shipment (inline stack)
2. Supplier (inline fix)
3. Consignee (inline fix)
4. Qty (inline fix)
5. Weight (inline fix)
6. Pickup Date (inline stack)
7. Mode (inline stack)
8. Due Date (inline stack)

Keep your CSS, but you no longer need the stack1. Then add the following JavaScript:

$(document).ready(function(){
  $.getScript("https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js",function(){
    $(".ShipmentDetails ul").masonry({
      itemSelector: ".inline",
      columnWidth: ".inline",
    });
  });
});

This loads the plugin, applies the Masonry logic to the <ul> within your target section, tells it to apply the layout/formatting to items within the <ul> that have the inline class, and tells it to use the width of the inline class as the default column width for the grid layout.