<div class="container">
    <div class="box">
        <div class="cursos-header">
            <div class="title">Cursos  DevCode</div>
        </div>
        <div class="cursos-row">
            <a class="link" href="https://devcode.la/cursos/">
                <div class="curso-section">
                    <div class="logo">
                        <img src="https://s3-us-west-2.amazonaws.com/devcode/media/courses/kotlin_01-01(1).png" width="75" height="75" alt="Kotlin">
                    </div>
                    <div class="info">
                        <div class="curso">Fundamentos de Kotlin</div>
                        <div class="date">30/01/2017</div>
                    </div>
                </div>
            </a>
            <div class="tags-section">
                <a class="tag">Android</a>
                <a class="tag">Mobile</a>
            </div>
        </div>
        <div class="cursos-row">
            <a class="link" href="https://devcode.la/cursos/">
                <div class="curso-section">
                    <div class="logo">
                        <img src="https://s3-us-west-2.amazonaws.com/devcode/media/courses/PHP_7-02.png" width="75" height="75" alt="PHP7">
                    </div>
                    <div class="info">
                        <div class="curso">Fundamentos de PHP7</div>
                        <div class="date">19/01/2017</div>
                    </div>
                </div>
            </a>
            <div class="tags-section">
                <a class="tag">Backend</a>
                <a class="tag">Web</a>
            </div>
        </div>
        <div class="cursos-row">
            <a class="link" href="https://devcode.la/cursos/django-fundamentos">
                <div class="curso-section">
                    <div class="logo">
                        <img src="https://s3-us-west-2.amazonaws.com/devcode/media/courses/django_2-01.png" width="75" height="75" alt="Django">
                    </div>
                    <div class="info">
                        <div class="curso">Fundamentos de Django 1.10</div>
                        <div class="date">Disponible</div>
                    </div>
                </div>
            </a>
            <div class="tags-section">
                <a class="tag">Backend</a>
                <a class="tag">Web</a>
            </div>
        </div>
        <div class="cursos-row">
            <a class="link" href="https://devcode.la/cursos/javascript-fundamentos/">
                <div class="curso-section">
                    <div class="logo">
                        <img src="https://s3-us-west-2.amazonaws.com/devcode/media/courses/11-02.png" width="75" height="75" alt="JavaScript">
                    </div>
                    <div class="info">
                        <div class="curso">Fundamentos de JavaScript</div>
                        <div class="date">Disponible</div>
                    </div>
                </div>
            </a>
            <div class="tags-section">
                <a class="tag">Frontend</a>
                <a class="tag">Web</a>
            </div>
        </div>
        <div class="cursos-row">
            <a class="link" href="https://devcode.la/cursos/wordpress-fundamentos">
                <div class="curso-section">
                    <div class="logo">
                        <img src="https://s3-us-west-2.amazonaws.com/devcode/media/courses/i%CC%81cono_wordpress-01.png" width="75" height="75" alt="JavaScript">
                    </div>
                    <div class="info">
                        <div class="curso">Fundamentos de WordPress</div>
                        <div class="date">Disponible</div>
                    </div>
                </div>
            </a>
            <div class="tags-section">
                <a class="tag">CMS</a>
                <a class="tag">Web</a>
            </div>
        </div>
    </div>
    <div><br>
        <code>
          <span>document.querySelectorAll('.cursos-row')[<input id="indice" type="number" onchange="actualizar()" value="1">
            </input>];
          </span>
        </code>
       <br />
        <code>
          <span>padre.querySelectorAll('<input id="selector" onkeyup="actualizar()" value=".tag"></input>);
          </span>
        </code>
      <br>
      <div class="resultados"> Resultados
        <div class="selection"></div>
      </div>
      </div>
</div>

body {
  font-family: Roboto, sans-serif;
  margin: 0;
}

.container {
  display: flex;
}

.box {
  width: 220px;
}

.curso-section {
  display: flex;
}

.logo {
  width: 40%;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.info {
  width: 60%;
  margin: 10px 0;
}

.cursos-header .title{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px;
}

.title {
  font-size: 20px;
}

.tags-section {
  margin: 10px 20px;
}

.tag {
  text-decoration: none;
  margin-right: 5px;
  margin-bottom: 5px;
  padding: 5px 10px;
  border-radius: 4px;
  background-color: #ececec;
  color: #333;
  border: 1px solid #ccc;
  font-size: 13px;
}

.link{
  text-decoration: none;
  color: #000;
}

.curso-title {
  font-size: 18px;
}

.date {
  font-size: 14px;
}

.selection {
  padding: 5px;
  border: 1px solid black;
  font-size: 13px;
}

#selector {
  width: 50px;
}

#indice {
  width: 25px;
}

var text = document.querySelector('.container .selection');
actualizar();

function actualizar() {
  
  var inputind = document.querySelector('#indice');
  var padre = document.querySelectorAll('.cursos-row')[Number(inputind.value)];
  
  var inputsel = document.querySelector('#selector');
  var elementos = padre.querySelectorAll(inputsel.value);
  
  text.innerHTML = "";
  for(i=0;i<elementos.length;i++){
    text.innerHTML += elementos[i].innerText + "<br>";
  } 
}