css align multiple line contenteditable content on right side

Question

I'm trying to make a basic multi-line input form with html css etc... For the inputs I'm using a contenteditable="true" span instead of the regular , and also I don't want to use tables.

That being said, I'm trying to line of the text "labels" and the input boxes, like this picture:

everythings working fine more or less, except when the contenteditable reaches multiple lines. I need the multi-line thing to line up with the labels and not reset to the beginning of the line. Here's the code so far:

  input, .new_input { border:0; outline:0; background:transparent; border-bottom:1px solid black; } .titlething { display:inline-block; text-align:right; width:80px; margin-left:-20px; } #word_edit { position:absolute; max-width:300px; border:1px #0F23D5 solid; padding:4px; background:#A1C9E4; border-radius:15px; padding:15px; } 

 <div id="word_edit"> <label> <span class="titlething">Meaning</span> <span class="new_input" data-placeholder="Meaning:" data-name="meaning" contenteditable="true">some default text</span></br> </label> <label> <span class="titlething">Phonetic</span> <span class="new_input" data-placeholder="Phonetic:" contenteditable="true" data-name="phonetic">hi</span></br> </label> <label> <span class="titlething">Other</span> <span class="new_input" data-placeholder="Other:" contenteditable="true" data-name="other">test</span></br> </label> <button data-name="done">Done!</button> </div> 

As you can see, everything works more-or-less until you get to the next line, but I need the new line to start at the same place as the first line.

Any ideas?

Answer 1

Please look at the snippet below, I added 2 lines:

display: inline-block; to .new_input
and
vertical-align: top; to .titlething

 input, .new_input { border: 0; outline: 0; background: transparent; border-bottom: 1px solid black; display: inline-block; } .titlething { display: inline-block; text-align: right; width: 80px; margin-left: -20px; vertical-align: top; } #word_edit { position: absolute; max-width: 300px; border: 1px #0F23D5 solid; padding: 4px; background: #A1C9E4; border-radius: 15px; padding: 15px; } 

 <div id="word_edit"> <label> <span class="titlething">Meaning</span> <span class="new_input" data-placeholder="Meaning:" data-name="meaning" contenteditable="true">some default text</span></br> </label> <label> <span class="titlething">Phonetic</span> <span class="new_input" data-placeholder="Phonetic:" contenteditable="true" data-name="phonetic">hi</span></br> </label> <label> <span class="titlething">Other</span> <span class="new_input" data-placeholder="Other:" contenteditable="true" data-name="other">test</span></br> </label> <button data-name="done">Done!</button> </div>