CSS display inline makes two rows instead of one - css

Question

What should I use if my layout looks good without the display element, then I must add display: none which is set dynamically to display: block which destroys my layout. Is there no "normal" display? I have tried inline and it doesn't work either. I want to first set it to display: none and then I want it to look like it had no or "normal" display property.
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet"
type="text/css">
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="center jumbotron">
<div class="container" style="margin-top:20px; width: 75%">
<h4 class="ui header">Semantic UI Form</h4>
<form name="formular" class="ui form">
<div class="ui grid">
<div class="four wide column ">
<label>First Name</label>
</div>
<div class="twelve wide column">
<input type="text" name="first-name" placeholder="First Name">
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Last Name</label>
</div>
<div class="twelve wide column">
<input type="text" name="first-name" placeholder="Last Name">
</div>
</div>
<div class="ui grid" id="category_contents">
<div class="four wide column ">
<label>Last Name</label>
</div>
<div class="twelve wide column">
<input type="text" name="first-name" placeholder="Last Name">
</div>
</div>
<div style="display: inline;" id="categor2y_contents" class="ui grid">
<div class="four wide column ">
<label>Last Name</label>
</div>
<div class="twelve wide column">
<input type="text" name="first-name" placeholder="Last Name">
</div>
</div>
<!-- <button class="ui button" type="submit">Submit</button> -->
</form>
</div>
</div>
</div>
</div>
Update
The solution was to add an extra <div class="ui grid"> but how am I supposed to know that?

Answer 1

If I understand your question, you are wanting to revert back to an element's initial state of display after you've overwritten it with display:none; correct? If so, simply:
#element {
display: initial;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/initial

Answer 2

The solution was to add another ui grid. I found this solution from another answer How to align my label and input field
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet"
type="text/css">
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="center jumbotron">
<div class="container" style="margin-top:20px; width: 75%">
<h4 class="ui header">Semantic UI Form</h4>
<form name="formular" class="ui form">
<div class="ui grid">
<div class="four wide column ">
<label>First Name</label>
</div>
<div class="twelve wide column">
<input type="text" name="first-name" placeholder="First Name">
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Last Name</label>
</div>
<div class="twelve wide column">
<input type="text" name="first-name" placeholder="Last Name">
</div>
</div>
<div style="display: block;" class="ui grid" id="category_contents">
<div class="ui grid">
<div class="four wide column ">
<label>Last N2ame</label>
</div>
<div class="twelve wide column">
<input type="text" name="first-name" placeholder="Last Name">
</div>
</div>
<!-- <button class="ui button" type="submit">Submit</button> -->
</form>
</div>
</div>
</div>
</div>