Position a list of text and text input fields - html

Question

I am trying to achieve the following:
A list of text on the left and text input on the right.
This is my attempt, but it is neither working very well or is rather elegant:
.textbox {
width: 400px;
border: solid black 2px;
}
ul {
padding: 5px;
display: inline-block;
list-style-type: none;
}
<div class="textbox">
<h4>Info section</h4>
<ul>
<li>General</li>
<li>Board name</li>
<li>Board image</li>
<li>Short domains</li>
<li>Use short domains?</li>
<li>Get in touch</li>
<li>Add short domain</li>
<li>Delete board</li>
</ul>
<ul>
<li>
<input type="text">
</li>
<li>
<input type="text">
</li>
<li>
<input type="text">
</li>
<li>
<input type="text">
</li>
<li>
<input type="text">
</li>
<li>
<input type="text">
</li>
<li>
<input type="text">
</li>
</ul>
</div>
Can I do, what I want to achieve in another more elegant way?

Answer 1

Using Flexbox you can easily achieve what you want.There are many light weight frameworks which help for such use cases.One small example using such a framework,
Fiddle
<div>
<div class="row around-xs">
<div class="col-xs-6 start-xs">
General
</div>
<div class="col-xs-6">
<input type="text">
</div>
</div>
<div class="row around-xs">
<div class="col-xs-6 start-xs">
General
</div>
<div class="col-xs-6">
<input type="text">
</div>
</div>
<div class="row around-xs">
<div class="col-xs-6 start-xs">
General
</div>
<div class="col-xs-6">
<input type="text">
</div>
</div>
<div class="row around-xs">
<div class="col-xs-6 start-xs">
General
</div>
<div class="col-xs-6">
<input type="text">
</div>
</div>
<div class="row around-xs">
<div class="col-xs-6 start-xs">
General
</div>
<div class="col-xs-6">
<input type="text">
</div>
</div>
</div>
I recommend a framework because you can be more productive in short time.

Answer 2

This is how I would do it :
<div class="container">
<h3 class="container-heading">heading</h3>
<div class="form-item">
<p class="form-item-name">General</p>
<p class="form-item-field"><input type="text"></p>
</div>
</div>
css :
.form-item{width:100%;}
.form-item-name{width:50%; float:left;}
.form-item-field{width:50%; float:left;}

Answer 3

For UI like the one in your OP you can use table:
.textbox {
width: 400px;
border: solid black 2px;
}
.textbox h4 {
margin: 0;
}
table tr td:first-child {
width: 50%;
}
table tr td input {
width: 200px;
}
.textbox table {
padding: 10px;
}
<div class="textbox">
<h4>Info section</h4>
<table>
<tr>
<td>General</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>Board image</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>Board name</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>Board name</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>Add short domain</td>
<td>
<input type="text">
</td>
</tr>
</table>
</div>

Answer 4

Change HTML structure a bit and with Flexbox you can do this
.info {
width: 80%;
margin: 0 auto;
padding: 25px;
border: 1px solid black;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: flex;
margin: 5px;
}
input {
flex: 0 1 60%;
margin-left: auto;
}
<div class="info">
<h3>Info Section</h3>
<ul>
<li><label for="">Lorem ipsum dolor</label> <input type="text"> </li>
<li><label for="">Lorem ipsum dolor amet</label> <input type="text"> </li>
<li><label for="">Lorem </label> <input type="text"> </li>
<li><label for="">Lorem ipsum dolor</label> <input type="text"> </li>
<li><label for="">Lorem ipsum or</label> <input type="text"> </li>
<li><label for="">Lorem ipsum</label> <input type="text"> </li>
</ul>
</div>

Answer 5

First of all use semantic HTML: if you need improve a form on your site, use tags <form> <input> <label> etc.
<form>
<fieldset>
<h4>Info section</h4>
<div>
<label for="general">General</label>
<input id="general" type="text" placeholder="General">
</div>
<div>
<label for="name">Board name</label>
<input id="name" type="text" placeholder="Board name">
</div>
<div>
<label for="image">Board image</label>
<input id="image" type="image" placeholder="Board image">
</div>
<div>
<label for="domains">Short domains</label>
<input id="domains" type="text" placeholder="Short domains">
</div>
<div>
<label for="foo">Use short domains?</label>
<input id="foo" type="text" placeholder="Use short domains?">
</div>
<div>
<label for="touch">Get in touch</label>
<input id="touch" type="text" placeholder="Get in touch">
</div>
<div>
<label for="short_domain">Add short domain</label>
<input id="short_domain" type="text" placeholder="Add short domain">
</div>
<div>
<label for="bar">Delete board</label>
<input id="bar" type="text" placeholder="Delete board">
</div>
</fieldset>
</form>
jsfiddle-link
and I think in the last div instead label and input Delete board should be <button type="submit">Delete board</button> but I don't know clearly, maybe you need this input