Labels under inputs inline with other text - html

Question

I need help aligning labels under input boxes such as a description of what should be input into the textbox, but I also need text aligned with the textbox after
I tried making new table rows below the input boxes and using margins, but this doesn't line up in Chrome, it does in IE, but not Chrome.
I've tried
< tr >< td colspan='1' >< span style='display: inline-block;' >You will arrive on: < input type='text' >< label >(Date)< /label >at < input type='text' > < label >(Time)< /label>< /span >, please bring all documents with you.
This should be:
You will arrive on: at (inline with textboxes) , please bring all documents with you.(align with previous text boxes, so this should be above the labels as well.)
Rephrasing: I need something like a paragaph, with a block of text, but with inputs mixed into this text. Then I need small descriptive labels directly under the inputs. I don't want these small descriptive labels to be inline with the other paragraph's text only right under the inputs... example:
"This is a paragraph < input text here > < label that goes under input > paragraph text continues on here < another input text here > < label that goes under this input > again the paragraph text goes on here inline with the other paragraph text and the inputs"

Answer 1

I think I've understood what you're trying to ask. You need to wrap the label and input in a div so that the label can be positioned off of the input tag.
.label-under {
position: relative;
display: inline;
}
.label-under label {
position: absolute;
left: 0px;
top: 10px;
}
span {
line-height: 2.5;
}
<span style='display: inline-block;' >You will arrive on: <div class="label-under"><input type='text' >
<label>(Date)</label></div> at <div class="label-under"><input type='text' >
<label>(Time)</label></div>, please bring all documents with you.</span>
Edit: You may need to adjust the line height of the span element if you're viewing on a device with a small width.
// Is optional and can be removed.
span {
line-height: 2.5;
}
// But top: 10px must be changed to top: 20px

Answer 2

skip the table and use display flex instead.
.form {
display: flex;
align-items: center;
}
.input-container {
display: flex;
align-items: flex-end;
margin-right: 2rem;
}
.input-container__label {
margin-right: .5rem;
}
<form action="" class="form">
<div class="input-container">
<label for="email" class="input-container__label">Email</label>
<input type="text" class="input-container__element">
</div>
<div class="input-container">
<label for="something" class="input-container__label">Something</label>
<input type="text" class="input-container__element">
</div>
</form>