If you are talking about .tftext in the pasted code then that was a mistake and should be combined. Refer to the codepen code as I had already changed it there
Usually your design will have elements that need to fit together or expand and shrink as required. Sometimes it is necessary to control how much space these elements take up and you have a variety of properties available for this.
Which properties you use will depend on the design and how you want it to look. The easiest solutions are often the best so keeping things simple means you may not need anything extra.
In the end it does come down to experience but common sense can play a big part also.
Flexbox (display:flex) is a modern method for laying out items horizontally (or vertically) but not specifically in a grid structure. It has many methods and properties available to it and too complicated to explain simply. There are however a great number of tutorials around on flex so suggest you research them yourself as it will be worth the effort. Flex is not something you can learn at first pass so you do have to practice with it.
Just keep practicing and asking questions like you are doing:)